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

curried 发布于2019-08-20 13:38 / 1296人阅读

摘要：使用抓取页面详情，并且保存页面样式获取元素匹配到规则，返回集合获取元素所有最终使用的属性值大招想到获取元素的样式，第一时间就想到了这货里面被废弃了这货没法使用了，接下来就看下面了这个方法也是挂在上的可以直接使用返回对象然后看一下对象，有个属

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

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

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

大招

getMatchedCSSRules

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

// chrome 里面
var 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上的可以直接使用

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

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

如果这么简单就好了。。

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

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

看来需要使用大招了.

大招

所有正规军失败了，下面就是游击队的表演了

获取通过链接进来的css样式表

通过ajax获取样式表内容

计算元素命中的样式

获取所有页面样式

本来是能通过document.styleSheets 来获取样式，但是有个css优先级问题，所以需要通过document.querySelectorAll("link") 获取所有link标签

var sheets = []
 $("link").each(function () {
                    var link = $(this)
                    sheets.push({
                        prev: link.prev(), // 记录元素位置，便于插入
                        el: link,// 记录当前元素，用来删除
                        href: link.attr("href")
                    })
                })

获取样式表内容

所幸的是在phantomjs里面可以跨域发送ajax请求，并且能够获取response.text

function iterLink(sheets, func) {
    var sheet = sheets.pop()
    if (!sheet) {
        return
    }
    var g = new XMLHttpRequest
    g.open("GET", sheet.href)
    g.onreadystatechange = function () {
        if (this.readyState == this.DONE) {
            var h = $("")
            h.prop("textContent", this.responseText)
            sheet.el.remove() // 删除当前元素
            sheet.prev.after(h)// 在当前元素的位置上插入重新创建的元素
            if (sheets.length === 0) {
                func && func()
            } else {
                iterLink(sheets, func)
            }
        }
    }
    g.send()
}

计算元素命中的样式规则

研究文档才发现dom还有matches方法，天不绝人之路啊
matches接收selectorString返回true or false

上面做的所有工作都是为了这个坑货，直接上代码吧

function getElStyleStr(a) {
    var sheets = document.styleSheets 
    a.matches = a.matches || a.webkitMatchesSelector //获取到真正的matches方法
    var tmp = {}
    var tmpArr = []

    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules //前面两步执行之后才能得到所有的css rules
        // 计算rule
        for (var r in rules) {
            var rule = rules[r]
            var style = rule.style 
            if (a.matches(rule.selectorText)) { // 调用matches获取，测试匹配
                for (var j = 0; j < style.length; j++) {
                    tmp[style[j]] = style[style[j]]
                }
            }
        }
    }

    for (var k in tmp) {
        tmpArr.push(k + ":" + tmp[k])
    }
    return tmpArr.join(";")
}

得到styleStr之后就可以直接写入到对应元素的style属性里面了

又填了一个大坑...

GPU云服务器云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81161.html

获取元素&quot;正在应用&quot;的css样式

摘要：使用抓取页面详情，并且保存页面样式获取元素匹配到规则，返回集合获取元素所有最终使用的属性值大招想到获取元素的样式，第一时间就想到了这货里面被废弃了这货没法使用了，接下来就看下面了这个方法也是挂在上的可以直接使用返回对象然后看一下对象，有个属使用phantomjs抓取页面详情，并且保存页面样式 getMatchedCSSRules 获取元素匹配到css规则，返回CSSStyleRul...

boredream 2019-08-30 13:22 评论0 收藏0
Html/Css/Jquery知识点集锦

摘要：首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。接着，再次使用将和分离开来，这样已经独立识别。元素不能用作语义用途以外的其他目的。Html1、Html5有哪些新特性，移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区别HTML和HTML5?HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。拖拽释放(Drag and drop) ...

shiweifu 2019-08-30 15:56 评论0 收藏0
前端页面总结

摘要：定位使元素的位置与文档流无关，因此不占据空间。它的行为就像而当页面滚动超出目标区域时，它的表现就像，它会固定在目标位置。此元素会被显示为内联元素，元素前后没有换行符。以下内容部分转载自菜鸟教程CSS层叠样式表(CascadingStyleSheets)内联：内嵌：外部样式文件：[object Object]rel 属性，规定当前文档与被链接文档/资源之间的关系。优先级：内联>内嵌>...

番茄西红柿 2019-04-23 11:40 评论0 收藏0
html常用标签整理

摘要：主要通过样式为其赋予不同的表现标签用来定义内联行内元素，并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言，zh-CN中文的意思，整个文档的内容以中文为主，如果以英文为主，就写成lang=en 3 4 <head> 5 <meta charset...

番茄西红柿 2019-04-23 13:06 评论0 收藏0