是不是大家在写代码过程中经常会遇到 当通过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()都是返回的字符串,如果要进行数值比较,应该先进行转换)。