javascript - 属性选择器、JavaScript 和 IE8

Question

我正在尝试使用属性选择器和 CSS 来格式化元素。

HTML 看起来像:

<div id="user" highlight="false">User Name</div>

CSS 是:

[highlight=true]
{
    background-color: red;
}

[highlight=false]
{
    background-color: white;
}

然后是一些伴随的 JavaScript:

if( foo )
{
    node.setAttribute('highlight', true);
}
else
{
    node.setAttribute('highlight', false);
}

这适用于 Firefox 和 Chrome。当 JavaScript 更改 highlight 属性时，元素的背景颜色会相应更改。然而，在 IE8 中，情况就不同了。元素将根据最初在 HTML 中分配的高亮值正确显示，但当属性动态更改时，元素的显示不会改变。

这是一个已知的怪癖吗？是否有已知的解决方法？

更新我只是将属性名称更改为“frob”，值为“on”和“off”。这应该可以解决有关保留值或可解释值的任何问题。

还有一点值得注意。当我打开 IE8 开发人员工具并使用 HTML 检查器时，它会显示 [frob=on] 或 [frob=off] 样式，以应用于我启动文档检查器时 frob 具有的任何值。但是，检查器 View 中的 frob 属性将不再更改。在 HTML 的初始呈现之后，绝不会应用 [frob=on/off] css 中的值。

更新:问题已解决解决方案是强制重绘。有多种方法可以做到这一点，但标准的方法似乎是将类名重新分配给它自己。

Answer 1

您正在使用未知属性 hightlight。它是 IE，因此它根据其名称支持属性(似乎比支持每个属性名称更难，但是......它是 IE)。

只需使用 class="hightlight" - 更易于实现和处理。