使用Javascript/JQuery獲取類或id的所有CSS屬性

是否可以指定類或ID並獲取該特定類或ID的所有CSS規則。我不是指一個元素，我想指定一個類並返回該類的所有CSS。使用Javascript/JQuery獲取類或id的所有CSS屬性

我知道我可以使用.style來獲得內聯樣式，但我不需要內聯，它必須來自樣式表。

它甚至有可能與JS？它可以訪問.css文件並返回某個類的屬性列表嗎？

對於沒有代碼的道歉，這更多的是一個理論問題，儘管如果有人有手頭的功能，我很樂意去研究它。

2017-08-01 Varin

使用document#styleSheets並將所有樣式表中的所有規則提取到數組中。然後通過selectorText過濾數組。

注意：我用一個簡單的陣列＃包括檢查請求的選擇出現在selectorText，但您可能希望創建進行嚴格的檢查，以防止誤報。例如，選擇器文本.demo也可以找到.demogorgon的規則。

const findClassRules = (selector, stylesheet) => { 
 
    // combine all rules from all stylesheets to a single array 
 
    const allRules = stylesheet !== undefined ? 
 
    Array.from((document.styleSheets[stylesheet] || {}).cssRules || []) 
 
    : 
 
    [].concat(...Array.from(document.styleSheets).map(({ cssRules }) => Array.from(cssRules))); 
 
    
 
    // filter the rules by their selectorText 
 
    return allRules.filter(({ selectorText }) => selectorText && selectorText.includes(selector)); 
 
}; 
 

 
console.log(findClassRules('.demo', 0));

.demo { 
 
    color: red; 
 
} 
 

 
.demo::before { 
 
    content: 'cats'; 
 
}

來源

2017-08-01 22:02:53

這絕對有很大幫助。我在香草JS中並不是那麼棒......我如何修改上面的代碼以便能夠只輸入一個特定的樣式表？（例如'document.styleSheets [2]'），因爲如果其中一個樣式表不是本地的，則Chrome會返回NULL錯誤。 – Varin

我已添加按索引請求單個樣式表的功能。 –

你可以這樣做：

window.getComputedStyle($('[your class name]')[0])

退房https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle以獲取更多信息。

來源

2017-08-01 21:29:25

謝謝，不過這樣會與元素相關聯的所有樣式。我不想元素樣式作爲一個元素可以有多個類，上面的函數將返回所有類的所有規則。我希望能夠爲所有類或ID獲取所有CSS規則，而不是元素。 – Varin

啊，我明白了。我只是發現了這個其他堆棧溢出的答案，可能更多的是你正在尋找的東西。 https://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery如果這個作品讓我知道，我會更新我的答案指向其他人在正確的方向 –

使用Javascript/JQuery獲取類或id的所有CSS屬性

回答

相關問題