htmlElement.style 的一个坑

是不是大家在写代码过程中经常会遇到 当通过HTMLElement.style 获取样式表中某个样式时不能获取。

HTMLElement.style 显示的是空字符串。

只能通过在HTML 代码中写 内联样式 才能获取到。是不是感到很奇怪？

那是因为HTMLElement.style属性返回一个CSSStyleDeclaration对象，表示元素的 内联style属性（attribute），但忽略任何样式表应用的属性。

还有一种方法就是  使用window.getComputedStyle()。它会列出包括样式表中的属性。

var box1 = document.getElementById('box1');

var box1_style = window.getComputedStyle(box1,null);

console.log(box1_style.opacity);

通过这种方式就可以不用内嵌在HTML代码中而获取所有的样式了。（注意：HTMLElement.style和window.getComputedStyle()都是返回的字符串，如果要进行数值比较，应该先进行转换）。