javascript获取元素的css样式方法

之前了解到获取元素css样式的方法有三种：

①div.style

②getComputedStyle

③currentStyle

但对于三者的区别及详细用法并不是特别了解，各种查资料各种测试终于了解到了详细的用法，现在在此分享给大家，希望对大家有点用。

下面将对三种方式进行举例，先列出下面例子的html和css样式

1.div.style:只能获取到元素的行间样式，也就是写在html标签内部sytle内的样式。

举例：在JavaScript标签内书写一下内容。

   var txt=document.getElementById("txt");

   console.log(txt.style.color);                //此时id名为txt的元素没有行间样式，浏览器将打印不出来任何内容。

当在id名为txt的元素内添加style行样式时

上例中浏览器啊将打印出yellow字样。

这样就说明div.style方法只能打印出行间样式。

2.当JavaScript代码为下面的情况时：

var box=document.getElementById("box");

var txt=document.getElementById("txt");
var dome=window.getComputedStyle(txt,"null");

console.log(dome.color);       //rgb(255,0,0);

getComputedStyle方法获取到的颜色样式为rgb（）的样式，但是getComputedStyle()方法不能设置元素css样式，只能进行获取。

getComputedStyle方法有两个参数：第一个参数为要获取计算样式的元素，第二个参数可以是null、空字符串、伪类(如:before,:after)，这两个参数缺一不可。

3.currentStyle方法是IE浏览器下的专属用法。