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更改突出显示属性时，元素的背景颜色会根据需要更改。然而，在IE8中，这是一个不同的故事。元素将根据HTML中最初分配的高亮值正确显示，但是当动态更改属性时，元素的显示不会更改。

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

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

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

更新：解决问题 解决方案是强制重绘。有多种方法可以做到这一点，但看起来标准的是将className重新分配给它自己。

Answer 1

您使用的是未知属性hightlight。这是IE，所以它根据名称支持属性（看起来比支持每个属性名称更难，但是......它是IE）。

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

Answer 2

您要将属性设置为JavaScript true和false，而不是字符串"true"和"false"。浏览器可以将此解释为1和0，并导致不需要的结果。

你能试试吗

node.setAttribute('highlight', 'true');

Answer 3

使用javascript / css避免不可避免的跨浏览器兼容性问题我建议使用jQuery。

例如，要通过jQuery框架突出显示一个元素，这就是所需要的......

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

Answer 4

Answer 5