如何获取所有CSS元素 [英] How to get all CSS of element
问题描述
我今天一直在测试JavaScript CSS函数，并注意到当使用.style.cssText时，它只会给出我使用JS设置的CSS。
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.
我想要获取元素的所有CSS，所以我猜测我做错了，或者需要另一个函数，而不是像getComputedStyle，但是整个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，如：
So my question is how can i get the full CSS from the last part of my code like:
background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000;
而不是当前输出的较短的CSS？
instead of the current shorter CSS that is output?
<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，谢谢。
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.
推荐答案
MyDiv001.style.cssText 将只返回由 style 属性或属性设置的内联样式。
MyDiv001.style.cssText will return only inline styles, that was set by style attribute or property.
您可以使用 getComputedStyle 获取应用于元素的所有样式。您可以迭代返回的对象以转储所有样式。
You could use getComputedStyle to fetch all styles applied to element. You could iterate over returned object to dump all styles.
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;
}
这篇关于如何获取所有CSS元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
