点评:document.querySelector(elements).style 只针对与标签上的属性,如果在外部css 文件中的属性如何获取,下面介绍两个方法针对不同浏览器,感兴趣的朋友可以参考下
先看个例子 a6wHTML5中文学习网 - HTML5先行者学习网 a6wHTML5中文学习网 - HTML5先行者学习网
<div style="font-size:100px;">1111</div> a6wHTML5中文学习网 - HTML5先行者学习网
<p>2222</p> a6wHTML5中文学习网 - HTML5先行者学习网
<style>*{font-size:50px;}</style> a6wHTML5中文学习网 - HTML5先行者学习网
a6wHTML5中文学习网 - HTML5先行者学习网此时 如果用 document.querySelector("p").style.fontSize 是获取不到50px 值的 而 document.querySelector("div").style.fontSize 返回的是100
a6wHTML5中文学习网 - HTML5先行者学习网a6wHTML5中文学习网 - HTML5先行者学习网因此可以得知document.querySelector(elements).style 只针对与标签上的属性,如果在外部css 文件中的属性如何获取?
a6wHTML5中文学习网 - HTML5先行者学习网a6wHTML5中文学习网 - HTML5先行者学习网这里介绍两个方法针对不同浏览器 a6wHTML5中文学习网 - HTML5先行者学习网
a6wHTML5中文学习网 - HTML5先行者学习网
1、 obj.currentStyle
a6wHTML5中文学习网 - HTML5先行者学习网a6wHTML5中文学习网 - HTML5先行者学习网2、window.getComputedStyle
a6wHTML5中文学习网 - HTML5先行者学习网 a6wHTML5中文学习网 - HTML5先行者学习网
function getCurCss(id,porp){ a6wHTML5中文学习网 - HTML5先行者学习网
var obj = document.getElementById(id); a6wHTML5中文学习网 - HTML5先行者学习网
if (obj.currentStyle) { a6wHTML5中文学习网 - HTML5先行者学习网
return obj.currentStyle[prop]; a6wHTML5中文学习网 - HTML5先行者学习网
} else if (window.getComputedStyle) { a6wHTML5中文学习网 - HTML5先行者学习网
propprop = prop.replace(/([A-Z])/g, "-$1"); a6wHTML5中文学习网 - HTML5先行者学习网
propprop = prop.toLowerCase(); a6wHTML5中文学习网 - HTML5先行者学习网
return document.defaultView.getComputedStyle(obj, null)[prop]; a6wHTML5中文学习网 - HTML5先行者学习网
} a6wHTML5中文学习网 - HTML5先行者学习网
return null; a6wHTML5中文学习网 - HTML5先行者学习网
} a6wHTML5中文学习网 - HTML5先行者学习网
getCurCss(id,"fontSize"); a6wHTML5中文学习网 - HTML5先行者学习网