如何获取元素的所有CSS
我今天一直在测试Javascript CSS函数,并注意到当使用.style.cssText时,它只给我使用JS设置的CSS。如何获取元素的所有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,由于原因的答案。
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;
}
这对于获得完整风格非常有用。我仍然有兴趣知道为什么我的代码无法工作,但这基本上是我想要做的事情,非常感谢。 – zeddex 2013-02-21 21:08:36
来自MDC:[element.style](https://developer.mozilla.org/en-US/docs/DOM/element.style)对于了解元素的风格通常无用,因为它仅代表CSS在元素的内联“样式”属性中设置的声明,而不是来自其他位置的样式规则的声明,例如“
”部分中的样式规则或外部样式表。 – 2013-02-22 07:29:15
的可能重复[jQuery的可以得到一个元素相关联的所有CSS样式?](http://*.com/questions/754607/can-jquery-get-all-css-styles-associated-with - 元素) – 2013-02-21 10:44:18
不,这不是,这是使用jQuery,而我有上述代码中的常规JS。我也想知道我做错了什么,所以我知道为什么它没有返回所有CSS元素。 – zeddex 2013-02-21 10:53:40
找到一篇文章http://www.quirksmode.org/dom/getstyles.html - 我不是js的专家,但看起来很直接 – ggdx 2013-02-21 13:47:23