您好,欢迎访问一九零五行业门户网

JavaScript访问CSS属性的几种方式介绍_javascript技巧

javascript访问css属性的方式总体说来有两种:“通过元素访问”、“直接访问样式表”。另外访问样式的时候有一个不可忽略的问题——运行时样式。
1.通过元素访问
既然是要通过元素访问样式表,那么就应该先确定是哪个元素。这是dom的内容,在此先不多说。获取引用之后就可以通过 “引用.style.要访问的属性” ,来访问某个属性。举个例子,看如下代码。

当我们想要获取#a的背景色的时候就可以 document.getelementbyid(a).style.backgroundcolor;这样就完成了访问,之后是要返回还是更改属性值那就随你便了。
2.直接访问样式表
直接访问样式表总的来说就是“先找到相应的样式块,然后在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式”。
先说什么是样式块。在代码中,css代码会存在于标签之间或之中,一个或就是一个样式块。在代码中可能从上到下依次排列着多个代码块,我们可以像访问数组元素一样访问样式块。例如我们要访问样式块中的第一个,就可以document.stylesheets[0]
然后说什么是样式规则。先看如下代码

代码中分别规定了#a和#b的样式,#a的样式的集合或#b的集合就是一个样式规则。在这个样式块中,对#a的是第一个样式规则,对#b的是第二个样式规则。我们同样可以像访问数组元素一样访问样式规则。例如我们要访问#b样式规则,就可以document.stylesheets[0].cssrules[1] 当然你可以选择这么写document.stylesheet[0].rules[1]但这种写法不被firefox支持。
然后我们就可以访问相应的样式了。例如我们要把#b的背景色改成绿色,就可以document.stylesheets[0].cssrules[1].style.backgroundcolor=green;
3.运行时样式
看如下代码:
观察字体颜色

当我们运行alert(document.getelementbyid(b).style.color);的时候发现弹窗上什么都没输出,但页面的字体颜色明明是红色,为啥呢?这是因为每个元素的style对象属性并不是即时更新的。当我们要弹窗上输出红色的时候就要用运行时样式。window.getcomputedstyle(document.getelementbyid(b),null).color这样就可以访问到“红色”。访问运行时样式也有另外一种写法document.getelementbyid(b).currentstyle.color 但这种写法只有ie支持。
其它类似信息

推荐信息