獲取元素"正在應用"的css樣式

使用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屬性太多，保存到文檔裏面太佔用空間，其次...它是通過計算的

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

代碼的本意是想得到 100%這個數值，可是卻得到了XXXpx，這樣的話就無法作朋友了..

看來須要使用大招了.

大招

全部正規軍失敗了，下面就是游擊隊的表演了

1. 獲取經過連接進來的css樣式表

2. 經過ajax獲取樣式表內容

3. 計算元素命中的樣式

獲取全部頁面樣式

原本是能經過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 = $('<style type="text/css"></style>')
            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屬性裏面了

又填了一個大坑...