我希望能够从网页上没有使用的CSS元素中获得样式。例如，这是一个页面：
<html>
<head>
<style type="text/css">
#custom{
background-color: #000;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
正如您所看到的，ID"custom"有一个值，但没有在文档中使用。我想获得"custom"的所有值，而不在页面中使用它。我最接近的是：
el = document.getElementById('custom');
var result;
var styleProp = 'background-color';
if(el.currentStyle){
result = el.currentStyle[styleProp];
}else if (window.getComputedStyle){
result = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
}else{
result = "unknown";
}
创建一个具有给定ID的新元素并将其附加到文档中。然后读取值并移除元素。
示例：
var result,
el = document.body.appendChild(document.createElement("div")),
styleProp = 'background-color',
style;
el.id = 'custom';
style = el.currentStyle || window.getComputedStyle(el, null);
result = style[styleProp] || "unknown";
// Remove the element
document.body.removeChild(el);
我认为答案不是很好，因为它需要向DOM添加元素，这可能会干扰您的操作或造成视觉故障。
使用document.styleSheets我认为你可以得到一个侵入性较小的解决方案。（见此处）
试试这样的东西：
var result;
var SS = document.styleSheets;
for(var i=0; i<SS.length; i++) {
for(var j=0; j<SS[i].cssRules.length; j++) {
if(SS[i].cssRules[j].selectorText == "#custom") {
result = SS[i].cssRules[j].style;
}
}
}
这将为您提供一个包含所有样式作为关键点的对象。请记住，如果在样式表中重新声明样式，则可能需要更复杂的算法。