閱讀樣式表中的類名稱

Question

我有一個使用多個樣式標籤的HTML文檔。其中的一個款式有以下內容

<style id='pstyle'> 
.p0010, .p0016, .p0022, .p0028, .p0032, 
.p0034, .p0038, .p0042, .p0044, .p0046, 
.p0048, .p0050, .p0052, .p0054, .p0056, 
{ 
max-width:100%; 
background-size:100%; 
background-image: url('sprites.png'); 
} 
</style> 

document.styleSheets允許我使用完整的文檔使用樣式表。從那裏 - 一旦我抓住了正確的樣式表 - 我可以使用cssRules數組屬性來訪問每個包含樣式的selectorText屬性。但是，我一直無法弄清楚如何找到「正確」的樣式表。雖然我可以給樣式表一個id這不會作爲document.styleSheets [n]對象的屬性。

我做了大量的DOM操作，但它主要是在文檔中的視覺元素。我會非常感激的人誰可以告訴我怎麼去識別「正確」的樣式表

---

任務

一的純英文版本。找到樣式元素 - 記住將會有其他人 - 編號爲pstyle b。閱讀其中定義的類名稱並執行任何操作

Answer 1

我不確定要了解是否要獲取與<style>元素關聯的樣式表，或者是否想從樣式表中檢索元素。

所以在這裏，你會得到兩個：

// from the element 
 
console.log(pstyle.sheet === document.styleSheets[2]); 
 
// from the stylesheet 
 
console.log(document.styleSheets[2].ownerNode === pstyle);

<style id='pstyle'> 
 
</style>

_{注意，在片段是[2]因爲stacksnippet並注入樣式表}

現在拿到cssRules和selectorText，你只需要從選定的樣式表中讀取它：

var pstyle = document.getElementById('pstyle'); 
 

 
// from the element 
 
console.log(pstyle.sheet.cssRules[0].selectorText); 
 

 
// from the stylesheets 
 
for(var sheet of document.styleSheets){ 
 
    if(sheet.ownerNode === pstyle){ 
 
    console.log(sheet.cssRules[0].selectorText); 
 
    } 
 
    }

<style id='pstyle'> 
 
.p0010, .p0016, .p0022, .p0028, .p0032, 
 
.p0034, .p0038, .p0042, .p0044, .p0046, 
 
.p0048, .p0050, .p0052, .p0054, .p0056 
 
{ 
 
max-width:100%; 
 
background-size:100%; 
 
background-image: url('sprites.png'); 
 
} 
 
</style>