獲取元素"正在應(yīng)用"的css樣式

curried 發(fā)布于2019-08-20 13:38 / 1297人閱讀

摘要：使用抓取頁面詳情，并且保存頁面樣式獲取元素匹配到規(guī)則，返回集合獲取元素所有最終使用的屬性值大招想到獲取元素的樣式，第一時(shí)間就想到了這貨里面被廢棄了這貨沒法使用了，接下來就看下面了這個(gè)方法也是掛在上的可以直接使用返回對象然后看一下對象，有個(gè)屬

使用phantomjs抓取頁面詳情，并且保存頁面樣式

getMatchedCSSRules 獲取元素匹配到css規(guī)則，返回CSSStyleRule 集合

getComputedStyle 獲取元素所有最終使用的CSS屬性值

大招

getMatchedCSSRules

想到獲取元素的css樣式，第一時(shí)間就想到了這貨

// 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

這個(gè)方法也是掛在windows上的可以直接使用

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

然后看一下CSSStyleDeclaration對象，有261個(gè)屬性，看著可以使用的樣子，接下來就是把這個(gè)對象拼接成style字符串，就行了

如果這么簡單就好了。。

首先CSSStyleDeclaration屬性太多，保存到文檔里面太占用空間，其次...它是經(jīng)過計(jì)算的

代碼的本意是想獲得 100%這個(gè)數(shù)值，但是卻獲得了XXXpx，這樣的話就沒法做朋友了..

看來需要使用大招了.

大招

所有正規(guī)軍失敗了，下面就是游擊隊(duì)的表演了

獲取通過鏈接進(jìn)來的css樣式表

通過ajax獲取樣式表內(nèi)容

計(jì)算元素命中的樣式

獲取所有頁面樣式

本來是能通過document.styleSheets 來獲取樣式，但是有個(gè)css優(yōu)先級問題，所以需要通過document.querySelectorAll("link") 獲取所有l(wèi)ink標(biāo)簽

var sheets = []
 $("link").each(function () {
                    var link = $(this)
                    sheets.push({
                        prev: link.prev(), // 記錄元素位置，便于插入
                        el: link,// 記錄當(dāng)前元素，用來刪除
                        href: link.attr("href")
                    })
                })

獲取樣式表內(nèi)容

所幸的是在phantomjs里面可以跨域發(fā)送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() // 刪除當(dāng)前元素
            sheet.prev.after(h)// 在當(dāng)前元素的位置上插入重新創(chuàng)建的元素
            if (sheets.length === 0) {
                func && func()
            } else {
                iterLink(sheets, func)
            }
        }
    }
    g.send()
}

計(jì)算元素命中的樣式規(guī)則

研究文檔才發(fā)現(xiàn)dom還有matches方法，天不絕人之路啊
matches接收selectorString返回true or false

上面做的所有工作都是為了這個(gè)坑貨，直接上代碼吧

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 //前面兩步執(zhí)行之后才能得到所有的css rules
        // 計(jì)算rule
        for (var r in rules) {
            var rule = rules[r]
            var style = rule.style 
            if (a.matches(rule.selectorText)) { // 調(diào)用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之后就可以直接寫入到對應(yīng)元素的style屬性里面了