博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript之css操作总结
阅读量:7191 次
发布时间:2019-06-29

本文共 1319 字,大约阅读时间需要 4 分钟。

hot3.png

     用js获取、设置元素的样式是前端经常需要用到的,这里总结一些常用到的办法。

    1. 用js修改元素的class。

    class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了。

element.className;//可以获取元素的class。element.className='';//可以设置元素的class。

    2. 用js直接设置、获取元素的内联样式。

        ①  对于没有中划线的css属性一般直接使用style.属性名。如obj.style.width, obj.style.left, obj.style.position 获取或设置元素对应的样式。

        ② 对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写。 如: obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex 获取或设置元素对应的样式。

        ③ js操作css float属性的特殊写法 。 因为float是Javascript的保留字, 所以不能使用obj.style.float来设置或获取值, 其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用styleFloat:obj.style.cssFloat。

        ④ 一次操作元素的多个css属性用cssText。如:

obj.style.cssText;//获取元素所有的内联样式obj.style.cssText='margin-left: 1px; position: relative; left: 10px;';//一次设置多个css属性

    3. 内部样式和外部样式设置获取。

    元素的样式我们一般不会使用行内样式来设置,而是通过link外部样式设置。那么可以用下面的方式来获取元素的样式:

var getStyle=function(obj,styleName) {	if (obj.currentStyle) {		// ie		getStyle=function(obj,styleName){           return obj.currentStyle[styleName];        }        return obj.currentStyle[styleName];	} else {		getStyle=function(obj,styleName){           return getComputedStyle(obj, null)[styleName];        }        return getComputedStyle(obj, null)[styleName];	}}

    上面的方法不但可以获取非内联样式,也可以获取内联样式。但是不能获取符合样式如padding属性值,只能获取单一样式如padding-left等。

 

 

 

转载于:https://my.oschina.net/liuyongfov/blog/782442

你可能感兴趣的文章
C++ 命名规范---给自己用
查看>>
RequireJs入门
查看>>
linux vim用法总结
查看>>
07 字符编码 字符与字节 文件操作
查看>>
[若有所悟]七步,改变你的纯文本报告面目
查看>>
.net正则表达式大全(.net 的 System.Text.RegularExpressions.Regex.Match()方法使用)
查看>>
HDU1285:确定比赛名次(拓扑排序)
查看>>
linux扩展权限
查看>>
html5 table
查看>>
setsockopt 设置 SO_LINGER 选项
查看>>
Archlinux 安装小计
查看>>
八大排序算法(五) 起泡排序
查看>>
jquery操作cookie
查看>>
Entity Framework Tutorial Basics(33):Spatial Data type support in Entity Framework 5.0
查看>>
Java多线程系列--“JUC集合”03之 CopyOnWriteArraySet
查看>>
apache + php 无法访问redis
查看>>
copy快速排序
查看>>
数据库--MyBatis的(insert,update,delete)三种批量操作
查看>>
vim下撤销操作.选中复制等操作
查看>>
eclipse各版本汉化地址
查看>>