获取元素"正在应用"的css样式

2017-01-11 15:24:29来源:segmentfault作者:hyl2015人点击

使用phantomjs抓取页面详情,并且保存页面样式

getMatchedCSSRules 获取元素匹配到css规则,返回CSSStyleRule 集合


getComputedStyle 获取元素所有最终使用的CSS属性值


大招

getMatchedCSSRules

想到获取元素的css样式,第一时间就想到了这货


// chrome 里面
const style = getMatchedCSSRules(document.body)
// 'getMatchedCSSRules()' is deprecated. For more help, check
// https://code.google.com/p/chromium/issues/detail?id=437569#c2

被废弃了.


getMatchedCSSRules这货没法使用了,接下来就看下面getComputedStyle了


getComputedStyle

这个方法也是挂在windows上的可以直接使用


const style = getComputedStyle(document.body)
// 返回 CSSStyleDeclaration 对象

然后看一下CSSStyleDeclaration对象,有261个属性,看着可以使用的样子,接下来就是把这个对象拼接成style字符串,就行了


如果这么简单就好了。。


首先CSSStyleDeclaration属性太多,保存到文档里面太占用空间,其次...它是经过计算的


<style>
.conent {
width:100%;
}
</style>
<div></div>
<script>
const style = getComputedStyle(div)
console.log(style.width)
// 100px
</script>

代码的本意是想获得 100%这个数值,但是却获得了XXXpx,这样的话就没法做朋友了..


看来需要使用大招了.


大招

懒得写了..先保存吧

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台