获取包含无效 css 的样式属性的完整值答案

【问题标题】：Get the full value of a style attribute containing invalid css获取包含无效 css 的样式属性的完整值
【发布时间】：2015-07-08 20:38:28
【问题描述】：

我正在尝试获取 HTML 元素中样式属性的字符串值。我面临的问题是，如果样式属性的值无效，则结果中会省略该属性。

例子：

<article id="Contact" style="margin: 10px; padding: 10px; color:{Color};">
</article>

var contact =  document.getElementById("Contact");
var style = contact.getAttribute("style");
console.log(style); //Prints "margin: 10px; padding: 10px;"

我希望它打印 "margin: 10px; padding: 10px; color:{Color};"

https://jsfiddle.net/wybdL7xk/2/

我是否可以在 Internet Explorer 中获得全部价值？

*Chrome 的工作原理如下所示

【问题讨论】：

你用的是什么浏览器？它适用于 Chrome 43。
Internet Explorer 11
这看起来是特定于浏览器实现的。
这里的问题是IE在加载时会从DOM中删除无效的CSS...所以恐怕没有办法检索它。打开 IE 并查看 here 以了解我的意思。不过，您可以使用 data-style 属性来存储该字符串。 Demo
我明白了.. 谢谢。根据具体情况，这可能是一个好功能或一个坏功能。如果有人想出解决方法，即使似乎无能为力，请发布。

标签： javascript html css typescript

【解决方案1】：

也许您可以使用 AJAX 请求来读取 CSS 文档。这样你得到的不是 DOM 的子节点，而是一个文本文件。

 $.when($.get("document.css")).done(function(response){
       console.log(response);
       // Do something with response text
 }):

【讨论】：