html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

针对不同浏览器获取到css文件里相关属性的两种方法_CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评: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先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助