如何在IE9剥离样式属性值之前获取该值

How to get style attribute value before IE9 strips it

本文关键字：获取 属性 样式 IE9 剥离      更新时间：2023-09-26

我试图在IE9-10去掉无效值之前获取样式属性的值。到目前为止，我已经尝试了以下的每一种变体-

$0.attributes.style$0.style$0.getAttribute('style')

但似乎如果我试图设置一个无效的值，我就无法访问它-

<div style="display: none; color: ${fake-value}">
</div>

由于IE9-10去掉了无效值，所以以上所有操作都只返回display: none。

值得注意的是，我已经尝试了很多变体，所以如果不可能的话，那也没关系，但你尝试过或可以尝试吗？答案没有多大帮助，除非他们被确认做了什么：）

不幸的是，由于IE9实现CSS对象模型规范的方式，这是不可能的。

如果我们看一下规范，我们可以假设发生了以下情况（重点是我的）：

6.7.1解析CSS值

解析给定属性的CSS值意味着遵循以下内容步骤：

  • 让list是通过调用parse组件列表返回的值值中的值。

  • 根据CSS中属性属性的语法匹配列表规格

  • 如果上述步骤失败，则返回null。

  • 退货清单。

由于您的自定义颜色值与color属性的语法不匹配，IE在解析时返回null，基本上忽略了该属性，然后才将其显示在DOM中。

尽管你已经提到你不想这样做，但我再次建议你使用数据属性，这将为你提供一个跨平台的解决方案：

<div style="display: none;" data-color="${fake-value}">

如果您真的不能使用数据属性，另一种选择是用程序查看页面的源代码，并根据指定的值对其进行解析。我不建议这样做，但如果这是你想探索的途径，你可以在这里找到一个相关的问题。

更新：

有趣的是，如果我们查看CSS样式声明的DOM规范，我们会发现：

虽然实现可能无法识别CSS声明块，它有望提供对所有通过CSSTyleDeclaration接口

因此，作为对我之前回答的更新，我推测IE9错误地解释了规范——在DOM解析过程中使用了CSSOMreturn null实现（或类似的实现），而不是预期的DOM实现。

这就解释了为什么在其他浏览器中会得到预期的结果。

您可以不在元素上使用自定义属性来保存"无效"数据吗？像<element data-custom-attribute="some invalid stuff"></element>。

然后，也许可以使用Javascript来处理它，并将其添加到样式中。

嗯。。。我认为你需要使用ng风格的元素。Ng样式将以不同的方式进行评估，之后将使用适当的值填充元素的样式。通常，您会将agler评估的元素放在它们相应的角度指令中。在你的情况下，这就是ng风格。

例如，<element style="properStyle" ng-style="scopeVariableContainingMoreStyle"></element>将添加适当的样式，然后添加评估的样式。

这完全是开箱即用的，但如果你只需要读取属性，为什么不使用outerHTML并从中获取值，比如：

var a = document.getElementById('myDiv').outerHTML;
var i = a.search('color:');
var e = a.lastIndexOf('"');
var result = a.substr(i+6,e - (i+6));
alert(result);

编辑1:由于前面的答案不起作用，我尝试了一些其他的选择，我唯一能在style标签中添加一些东西并保持它的方法是：

style="display:none; -ms-custom: test;"

编辑2如果你需要添加一个没有被IE剥离的自定义样式，你可以在它之前添加-ms-，只有IE会读取它，因为它是-ms，所以它是安全的

相关文章：