CSS 如何获取元素的所有CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15000163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get all CSS of element
提问by zeddex
I have been testing the Javascript CSS functions today and noticed that when .style.cssText is used it only gives me the CSS that i set with JS.
我今天一直在测试 Javascript CSS 函数，并注意到当使用 .style.cssText 时，它只给我我用 JS 设置的 CSS。
I instead wanted to get all of the CSS for the elements so i am guessing that i am doing something wrong or perhaps need another function instead like getComputedStyle but for the whole CSS rather than single property values but i cannot find what i need when searching.
相反，我想获取元素的所有 CSS，所以我猜我做错了什么，或者可能需要另一个函数，例如 getComputedStyle 但对于整个 CSS 而不是单个属性值，但我在搜索时找不到我需要的东西。
So my question is how can i get the full CSS from the last part of my code like:
所以我的问题是如何从代码的最后部分获取完整的 CSS，例如：
background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000;
instead of the current shorter CSS that is output?
而不是输出的当前较短的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>
Edit - I would like a answer that uses regular Javascript if possible, hopefully a fixed version of my code and the reason why it does not return the full CSS, thanks.
编辑 - 如果可能，我想要一个使用常规 Javascript 的答案，希望是我的代码的固定版本以及它不返回完整 CSS 的原因，谢谢。
回答by Ivan Solntsev
MyDiv001.style.cssTextwill return only inline styles, that was set by styleattribute or property.
MyDiv001.style.cssText将仅返回由style属性或属性设置的内联样式。
You could use getComputedStyleto fetch all styles applied to element. You could iterate over returned object to dump all styles.
您可以使用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;
}
