2017-10-19 74 views
0

由於我對編程頗爲陌生,現在我發現Bootstrap,我正在使用容器和行以及col-XX等進行練習,以瞭解如何他們的CSS屬性。僅用Javascript獲取CSS非計算屬性值

因此,我正在尋找使用Javascript獲取CSS放置在CSS文件中的CSS值。不是jQuery,而是香草JS。不是計算出的CSS值,而是寫入的CSS值。就像我們在控制檯中的那個一樣。例如,我想讓它們以這種方式放回HTML中:<p>margin-right: 5%</p>

所以很多人都在談論window.getComputed(element).getPropertyValue("property"),但我不感興趣。 我聽說cssText,但我不確定它是否是好的。

有沒有解決方案?實際上是否存在一個地方,其中存儲了選擇器的所有屬性值,與屬性值並行計算?

感謝 阿爾諾

PS:我知道這個主題已經打開there但7年前開了,只有自我的答案不能滿足我想......

+0

[本文](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)應 – Flying

+0

另外[這個例子](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList#Example)似乎與你的問題 – Flying

+0

_「知道如何他們的CSS屬性是什麼?[...]因此,我正在尋找獲取開發人員使用Javascrip放入CSS文件的CSS值噸。 「 - 爲了達到既定目的,我寧願推薦您熟悉瀏覽器的開發工具,因爲它們擁有您可能已經查找的所有信息 - 並且具有可以檢查」現場「一切的優勢,只需點擊幾下鼠標就可以了,你不需要弄清楚如何獲得感興趣的元素,例如JavaScript,等等,它們都已經「觸手可及」了。 – CBroe

回答

0

如果您需要以編程方式訪問這些信息(與在devtools中查看它相反),您正在尋找document.styleSheets集合。該集合中的每個樣式表都具有該樣式表的CSS規則和媒體查詢規則等,其形式可以訪問實際樣式信息,而不是計算結果。

例如:

var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach); 
 
forEach(document.styleSheets, function(sheet, index) { 
 
    forEach(sheet.cssRules || sheet.rules, function(rule) { 
 
    if (rule instanceof CSSStyleRule && rule.selectorText == ".foo") { 
 
     console.log(".foo's width rule: " + rule.style.width); 
 
    } 
 
    }); 
 
});
.foo { 
 
    width: calc(100% - 10px); 
 
}