Javascript 如何获取元素的所有CSS_Javascript_Css_Dom

Javascript 如何获取元素的所有CSS

javascript css dom

Javascript 如何获取元素的所有CSS,javascript,css,dom,Javascript,Css,Dom,我今天一直在测试Javascript CSS函数，注意到当使用.style.cssText时，它只提供我用JS设置的CSS 相反，我想得到元素的所有CSS，所以我猜我做错了什么，或者可能需要另一个函数，比如getComputedStyle，但对于整个CSS，而不是单个属性值，但我无法找到搜索时需要的内容因此，我的问题是如何从代码的最后一部分获得完整的CSS，如： background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "L

我今天一直在测试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>


.MyDiv001{
背景色：#ffcccc；
字体系列：“Helvetica Neue”，Arial，“Lucida Grande”，无衬线；
}
.MyDiv002{
背景色：#ccffcc；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
这是MyDiv001
这是MyDiv002



//选择MyDiv001元素
var MyDiv001=document.getElementById（“MyDiv001”）；//选择MyDiv001
//为MyDiv001设置一些样式特性值
MyDiv001.style.setProperty（“字体大小”，“13px”，null）；
MyDiv001.style.setProperty（“color”，“#ff0000”，null）；
//获取MyDiv001的计算样式
var MyDiv001Style=window.getComputedStyle（MyDiv001）；
//显示MyDiv001样式属性值
document.write（“MyDiv001背景色=“+MyDiv001Style.getPropertyValue（“背景色”）+”
）；
document.write（“MyDiv001字体系列=“+MyDiv001Style.getPropertyValue（“字体系列”）+”
）；
document.write（“MyDiv001 font size=“+MyDiv001Style.getPropertyValue（“font size”）+”

）；
//选择MyDiv002元素
var MyDiv002=document.getElementById（“MyDiv002”）；//选择MyDiv002
//为MyDiv002设置一些样式特性值
MyDiv002.style.setProperty（“字体大小”，“16px”，null）；
MyDiv002.style.setProperty（“颜色”，“#0000ff”，null）；
//获取MyDiv002的计算样式
var MyDiv002Style=window.getComputedStyle（MyDiv002）；
//显示MyDiv002样式属性值
document.write（“MyDiv002背景色=“+MyDiv002Style.getPropertyValue（“背景色”）+”
）；
document.write（“MyDiv002字体系列=“+MyDiv002Style.getPropertyValue（“字体系列”）+”
）；
document.write（“MyDiv002 font size=“+MyDiv002Style.getPropertyValue（“font size”）+”

）；
//不是我所期望的
document.write（“MyDiv001 CSS=“+MyDiv001.style.cssText+”
”）；//如何获得完整的css？
document.write（“MyDiv002 CSS=“+MyDiv002.style.cssText+”
”）；//如何获得完整的css？

编辑-如果可能的话，我想要一个使用常规Javascript的答案，希望是我的代码的固定版本，以及它不返回完整CSS的原因，谢谢。

MyDiv001.style.cssText

将只返回内联样式，由

style

属性或属性设置

可以使用获取应用于元素的所有样式。您可以迭代返回的对象以转储所有样式

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;
}

函数dumpCSSText（元素）{
var s=''；
var o=getComputedStyle（元素）；
对于（变量i=0；i

现在是2020年，我们终于可以做到了

getComputedStyle（元素）.cssText

例如：

newElement.style.cssText=getComputedStyle（element）.cssText

为什么不干脆

`
const elt = document.querySelector("element");

function test(){
    console.dir(getComputedStyle(elt, null));
}

test();
`

请注意，

getComputedStyle

逐字返回计算值。也就是说，

em

等相对单位将作为计算的

px

值返回（如浏览器devtools的

computed

选项卡所示）

根据您期望的结果，这可能会使它作为一个可行的解决方案完全失效。不过，其他答案——包括公认的答案——没有完全提到这一点

没有足够的rep来评论这个单独的答案。

可能是重复的不，不是，这是使用jQuery，而我在上面的代码中有常规的JS。我还想知道我做错了什么，所以我知道为什么它没有返回所有的CSS元素。找到了一篇文章-我不是js专家，但看起来相当直截了当，这就是我最初想要的，我也想知道我哪里做错了，但后来我的问题被链接到了一个非主题的问题，如果不是，则称为重复，因此，我编辑了我的文章，使我认为大家都会明白的内容变得更加清晰。这对于获得完整的风格非常有用。我仍然有兴趣知道为什么我的代码不起作用，但这基本上是对我试图做的事情进行排序的，非常感谢。From MDC:对于了解元素的总体样式没有帮助，因为它只表示元素的内联

style

属性中设置的CSS声明，而不是来自其他地方的样式规则，例如

部分中的样式规则或外部样式表。