JavaScript访问CSS属性
来源:互联网 发布:微信群里发淘宝优惠券 编辑:程序博客网 时间:2024/05/21 08:56
JavaScript访问CSS属性的方式总体说来有两种:“通过元素访问”、“直接访问样式表”。另外访问样式的时候有一个不可忽略的问题——运行时样式。
1.通过元素访问
既然是要通过元素访问样式表,那么就应该先确定是哪个元素。这是DOM的内容,在此先不多说。获取引用之后就可以通过 “引用.style.要访问的属性” ,来访问某个属性。举个例子,看如下代码。
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> #a{ height:100px; width:100px; background-color:red; } </style> </head> <body> <div id="a"></div> </body></html>
当我们想要获取#a的背景色的时候就可以 document.getElementById("a").style.backgroundColor;这样就完成了访问,之后是要返回还是更改属性值那就随你便了。
2.直接访问样式表
直接访问样式表总的来说就是“先找到相应的样式块,然后在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式”。
先说什么是样式块。在代码中,CSS代码会存在于<style></style>标签之间或<link>之中,一个<style></style>或<link>就是一个样式块。在代码中可能从上到下依次排列着多个代码块,我们可以像访问数组元素一样访问样式块。例如我们要访问样式块中的第一个,就可以document.styleSheets[0]
然后说什么是样式规则。先看如下代码
<pre name="code" class="html"><!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> #a{ height:100px; width:100px; background-color:red; } #b{ height:100px; width:100px; background-color:blue; } </style> </head> <body> <div id="a"></div> <div id="b"></div> </body></html>
代码中分别规定了#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";
2.运行时样式
看如下代码:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> #a{ height:100px; width:100px; color:red; } #b{ height:100px; width:100px; } </style> </head> <body> <div id="a"> <div id="b">观察字体颜色</div> </div> </body></html>
当我们运行alert(document.getElementById("b").style.color);的时候发现弹窗上什么都没输出,但页面的字体颜色明明是红色,为啥呢?这是因为每个元素的style对象属性并不是即时更新的。当我们要弹窗上输出红色的时候就要用运行时样式。window.getComputedStyle(document.getElementById("b"),null).color这样就可以访问到“红色”。访问运行时样式也有另外一种写法document.getElementById("b").currentStyle.color 但这种写法只有IE支持。
0 0
- JavaScript访问CSS属性
- JavaScript访问CSS属性多种方法
- 05.javascript访问CSS
- JavaScript访问Css
- javascript属性访问表达式
- javascript属性方法访问
- JavaScript的属性访问
- javascript 访问对象属性
- Javascript 访问对象属性
- javascript 获取css 属性
- javascript 获取css 属性
- JavaScript 调用 CSS 属性
- javascript对象属性的访问
- JavaScript对象属性的访问
- JavaScript修改CSS属性函数
- JavaScript CSS Style属性参考
- JavaScript获取css属性值
- CSS 与 javascript 属性对照
- cocos2dx启动流程分析(源码版本:cocos2d-x-2.2.3)
- c++类实例在内存中所占字节数分析
- 浅析C++的封装性
- 搭建android开发环境(三)
- 在网络蚂蚁中设置代理服务器
- JavaScript访问CSS属性
- hdu 1164 Eddy's research I
- 静态编译parted在Android上运行
- [C\C++]何谓封装
- C语言的第二天
- 浅出C++封装性
- web前端面试题
- 代理服务器Squid 使用详解
- poj-2195