js的样式操作回顾-CSDN博客

今天回顾了一下element.style相关的一些方法。当我们需要用Js对一个元素的css样式进行一些额外的控制时，我们需要用到这些方法。

1.动态的设置样式。

习惯的做法是：

1 <div id="test">我是中国人</div>
2 
3 <script type="text/javascript">
4 　　vat ele = document.getElementById("test");
5 　　ele.style.fontSize = "24px";
6 </script>

这样做是无可厚非的，也是没什么问题的。另外一种写法是是基于函数调用思维，如

ele.setProperty("fontsize","24px",""); //这里第三个参数是优先级命令!important的设置

相对的有ele.getPropertyValue("fontsize"),ele.removeProperty("fontsize");

但是这些方法在IE下是不支持的。如果希望兼容性好点，应该考虑第一种做法。

2.cssText和getAttribute("style")

它们都是用来获取样式属性，区别是cssText获取的是全部的属性列表(键值列表模式)，getAttribute获取的是设置值的字符串（整体设置模式）。

这里的getAttribute("style")不兼容IE。

3.style对象只是单纯获取元素的“行内样式”，而不能获取html页面内部定义的样式表或者使用link元素、@import命令导入的外部样式表。

例如：

1 <div id="test">我是中国人</div>
2 
3 <script type="text/javascript">
4 　　vat ele = document.getElementById("test");
5 　　ele.style.fontSize = "24px";
6 </script>

运行后，返回的是一个空值。
怎么办？这是需要用到document对象的styleSheets集合，该集合包含了文档中所有样式表的引用。

注意：Opera不支持该对象，Safari部分支持

对于styleSheets集合，DOM对集合里面的每个样式表定义了一个cssRule集合，包含样式表的所有规则。IE下支持该集合，但是却预留了rules集合以供使用。
具体用法：

1 <div id="test">我是中国人</div>
2 
3 <script type="text/javascript">
4 　　vat ele = document.getElementById("test");
5 　　ele.style.fontSize = "24px";
6 </script>