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

boredream 發布于2019-08-30 13:22 / 3382人閱讀

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

使用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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115509.html

獲取元素&quot;正在應用&quot;的css樣式

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

curried 2019-08-20 13:38 評論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