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

Posted 2023-03-06

【中文标题】如何在 IE9 剥离之前获取样式属性值

【英文标题】：How to get style attribute value before IE9 strips it

【发布时间】：2015-05-01 23:56:19

【问题描述】：

我试图在 IE9-10 去除无效值之前获取 style 属性的值。到目前为止，我已经尝试了以下所有变体 -

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

但如果我尝试设置无效值，我似乎无法访问它 -

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

</div>

以上所有内容都只会返回display: none，因为 IE9-10 会去除无效值。

作为说明，我已经尝试了很多变化，所以如果不可能，那很好，但是 你试过 或 你能试试 答案没有多大帮助，除非他们被确认做某事:)

【问题讨论】：

请注意，如果您查看源代码，您可以看到剥离后的属性值，因此希望 IE9 有一些钩子。

为什么需要存储一个假的颜色值？你为什么不使用数据属性呢？

因为我们不想构建像ng-style 这样的属性。大多数框架都允许在属性值内进行字符串插值，只有 IE 才能让我们适应样式

【参考方案1】：

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

如果我们看一下规范，我们可以假设会发生以下情况（强调我的）：

6.7.1 Parsing CSS Values

解析给定属性的 CSS 值意味着遵循这些 步骤：

令 list 为调用解析组件列表返回的值 价值的价值。

匹配列表与 CSS 中属性属性的语法 规范。

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

返回列表。

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

---

虽然您已经提到您不想这样做，但我再次建议您改用数据属性，这将为您提供跨平台的解决方案：

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

---

如果您真的无法让自己使用数据属性，另一种选择是以编程方式查看页面源并将其解析为您指定的值。我不建议这样做，但如果这是您想探索的途径，您可以找到相关问题here。

---

更新：

有趣的是，如果我们查看 CSS Style Declarations 的 DOM 规范，我们会发现：

虽然实现可能无法识别一个内的所有 CSS 属性 CSS声明块，它期望提供对所有的访问 通过在样式表中指定的属性 CSSStyleDeclaration 接口

因此，作为我之前回答的更新，我推测 IE9 错误地解释了规范 - 在 DOM 解析期间使用 CSSOM return null 实现（或类似的东西），而不是预期的 DOM 实现。

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

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案2】：

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

然后也许使用 javascript，您可以使用它并将其添加到样式中。

【讨论】：

没有提到我们不想

【参考方案3】：

嗯...我认为您需要为该元素使用 ng-style。 Ng-style 将以不同的方式进行评估，然后将使用适当的值填充元素的样式。通常，您将 agular 评估元素放在其相应的 angular 指令中。在你的情况下，这是 ng 风格。

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

【讨论】：

这不是 Angular，所以 ng-style 在这里对我们没有任何帮助。

【参考方案4】：

这完全是开箱即用的，但是如果您只需要读取属性，为什么不使用 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所以它是安全的

【讨论】：

这不起作用，请确保在建议之前尝试答案

@PWKad 我更新了我的答案，请尝试告诉我们这是否有帮助

@PWKad：我真的不关心分数，但是如果你投票给人们，他们仍然回复你，至少检查答案并取消你的投票

实际上所有的浏览器都会忽略以-开头的样式并且不是可接受的样式声明。

当然：An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors..