如何获取元素的所有CSS答案

【问题标题】：How to get all CSS of element如何获取元素的所有CSS
【发布时间】：2013-02-06 15:40:39
【问题描述】：

我今天一直在测试 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 的原因，谢谢。

【问题讨论】：

Can jQuery get all CSS styles associated with an element? 的可能重复项
不，不是，那是使用 jQuery，而我在上面的代码中有常规的 JS。我也想知道我做错了什么，所以我知道为什么它没有返回所有元素 CSS。
找到一篇文章 quirksmode.org/dom/getstyles.html - 我不是 js 专家，但似乎相当直截了当
这是我最初想要的，我也想知道我哪里出错了，但后来我的问题被链接到了一个离题的问题，当它不是时被称为重复，所以我然后编辑了我的发布我认为对每个人来说都很明显的东西。

标签： javascript css dom

【解决方案1】：

这是 getComputedStyle 的 util 函数，用于获取给定 css 元素选择器的所有或过滤样式。

// Select the MyDiv001 element
var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001

// Set some style property values for MyDiv001
MyDiv001.style.setProperty("font-size", "44px", null);
MyDiv001.style.setProperty("color", "rgb(255, 255, 0)", null);


// Get the Computed Style for MyDiv001
var MyDiv001Style = window.getComputedStyle(MyDiv001);

// Show the MyDiv001 style property values
console.log( "MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "<br />");
console.log( "MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />");
console.log( "MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />");


const cssText = (cssSelector, stylesArr = null) => {
  const ele = document.querySelector(cssSelector);
  return Object.entries(getComputedStyle(ele))
    .filter(([k]) => stylesArr?.includes(k) ?? true)
    .map(([k, v]) => `${k}:${v}`)
    .join(";");
};

const myCssText = cssText("#MyDiv001", [
  "backgroundColor",
  "fontFamily",
  "fontSize",
  "color",
]);
console.log({myCssText});

const allCssText = cssText("#MyDiv001");
console.log({allCssText});

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

<div id="MyDiv001" class="MyDiv001">This is MyDiv001</div>
<div id="MyDiv002" class="MyDiv002">This is MyDiv002</div>

【讨论】：

【解决方案2】：

让 divStyle1 = document.body.style.cssText; 警报（divStyle1）；

【讨论】：

如果您需要将其设为字符串，您可能还需要使用 String(divStyle1)。

【解决方案3】：

注意getComputedStyle 字面上返回的是计算的 值。这意味着 em 等相对单位将作为计算出的 px 值返回（如浏览器开发工具的 computed 选项卡中所示）。

根据您想要的结果，这可能会使它作为一个可行的解决方案完全失效。不过，其他答案（包括已接受的答案）并未完全提及。

没有足够的代表发表评论，因此这个单独的答案。

【讨论】：

【解决方案4】：

为什么不只是

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

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

test();
`

【讨论】：

【解决方案5】：

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

getComputedStyle(element).cssText

例子：

newElement.style.cssText = getComputedStyle(element).cssText

【讨论】：

【解决方案6】：

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

【讨论】：

这非常适合获得完整的风格。我仍然想知道为什么我的代码无法正常工作，但这基本上是我想要做的事情，非常感谢。
来自 MDC：element.style 通常对于了解元素的样式没有用处，因为它仅表示在元素的内联 style 属性中设置的 CSS 声明，而不是来自样式规则的那些声明其他地方，例如<head> 部分中的样式规则或外部样式表。