通过JS动态的修改样式
CSS->DOM
整张页面的样式表可以通过document.styleSheets来获得。
内部样式表
style元素所代表的sheet属性为内嵌样式表
cssRules[]则代表列表,通过下标获取
内联样式表
更新样式
element.style
缺点:以element.sytle更新样式会使样式混在逻辑中,导致修改困难。更好的方法是更新class。将特定样式写在class中。
方式一 element.style.
这种方式
每个样式一条语句,将内嵌到元素的样式表中
这样的更新一个属性需要一条语句
不是我们熟悉的CSS
方式二element.style.cssText
一次性设置多个样式,以字符串。
更新class
将样式写在一个class中以分类,样式表。
这是一种推荐的方式,以更新少数的样式时使用。但是一次性要更新很多样式时,需要采用更换样式表的方式如下个标题所示
一次更新很多元素的样式
更换外联样式表
获取样式
style获取到的不一定是实际样式值
通用的方式获取元素实际的样式值
window.getComputedStyle()
var style = window.getComputedStyle( element[, pseudoElt]);
ie9-使用element.currentStyle( ) 方法做兼容。
这个是只读,不可写。
–element:当前想获取的元素的实际样式属性值。