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

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

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

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

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

Answer 1

您正在将属性设置为 JavaScripttrue和false，而不是字符串"true"和"false"。这可能会被浏览器解释为1和0并导致不需要的结果。

你能试一下吗

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

？