如何获取元素的所有CSS
如何获取元素的所有CSS
提问于 2013-02-21 18:41:17
我今天一直在测试Javascript CSS函数，注意到当使用.style.cssText时，它只给我提供了我用JS设置的CSS。
相反，我想要获得元素的所有CSS，所以我猜我做错了什么，或者可能需要另一个函数，比如getComputedStyle，但是对于整个CSS，而不是单个属性值，但是我在搜索时找不到我需要的东西。
所以我的问题是如何从代码的最后部分获得完整的CSS，比如：
background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000; 而不是输出当前较短的CSS？
<html>
<head>
<style type="text/css" media="screen">
.MyDiv001 {
background-color: #ffcccc;
font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;
}
.MyDiv002 {
background-color: #ccffcc;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="MyDiv001" class="MyDiv001">This is MyDiv001</div>
<div id="MyDiv002" class="MyDiv002">This is MyDiv002</div>
<br /><hr><br />
<script type="text/javascript">
// Select the MyDiv001 element
var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001
// Set some style property values for MyDiv001
MyDiv001.style.setProperty("font-size", "13px", null);
MyDiv001.style.setProperty("color", "#ff0000", null);
// Get the Computed Style for MyDiv001
var MyDiv001Style = window.getComputedStyle(MyDiv001);
// Show the MyDiv001 style property values
document.write( "MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "<br />");
document.write( "MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />");
document.write( "MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />");
// Select the MyDiv002 element
var MyDiv002 = document.getElementById("MyDiv002"); // Select MyDiv002
// Set some style property values for MyDiv002
MyDiv002.style.setProperty("font-size", "16px", null);
MyDiv002.style.setProperty("color", "#0000ff", null);
// Get the Computed Style for MyDiv002
var MyDiv002Style = window.getComputedStyle(MyDiv002);
// Show the MyDiv002 style property values
document.write( "MyDiv002 background-color = " + MyDiv002Style.getPropertyValue("background-color") + "<br />");
document.write( "MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "<br />");
document.write( "MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "<br /><br />");
// Not what i was expecting
document.write( "MyDiv001 CSS = " + MyDiv001.style.cssText+ "<br />"); // How do i get the full css?
document.write( "MyDiv002 CSS = " + MyDiv002.style.cssText+ "<br />"); // How do i get the full css?
</script>
</body>
</html>编辑-如果可能的话，我想要一个使用常规Javascript的答案，希望是我的代码的固定版本，以及为什么它没有返回完整的CSS，谢谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-02-22 04:15:54
MyDiv001.style.cssText将只返回由style属性或属性设置的内联样式。
您可以使用getComputedStyle来获取应用于元素的所有样式。您可以遍历返回的对象以转储所有样式。
function dumpCSSText(element){
var s = '';
var o = getComputedStyle(element);
for(var i = 0; i < o.length; i++){
s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
}
return s;
}Stack Overflow用户
发布于 2020-12-12 16:29:57
现在是2020年了，我们终于可以
getComputedStyle(element).cssText
示例：
newElement.style.cssText = getComputedStyle(element).cssText
Stack Overflow用户
发布于 2021-09-07 15:40:15
让divStyle1 = document.body.style.cssText；alert(divStyle1)；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15000163
复制相关文章
相似问题