属性选择器，JavaScript和IE8

我试图使用属性选择器和CSS来格式化元素。属性选择器，JavaScript和IE8

的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属性将不再在检查器视图中更改。在任何情况下，[frob = on/off] css中的值都不会在初始呈现HTML后应用。

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

来源

2010-01-21 Kennet Belenky

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

你可以尝试

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

？

来源

2010-01-21 20:51:16

更改JavaScript才能使用字符串形式并没有办法。谢谢，不过。 – 2010-01-21 20:57:21

好的。你还能尝试一些不同于真或假的东西，只是为了确保没有任何解析起作用？它是否与'rel'这样的已知有效属性一起工作？ – 2010-01-21 21:00:24

您正在使用未知属性hightlight。它是IE，所以它支持根据其名称的属性（似乎比支持每个属性名称更难，但它是IE）。

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

来源

2010-01-21 20:52:12 Crozin

我对这种方法并不满意，因为我已经将一个类应用于div（未在原始代码示例中显示）。将多个类应用于节点是一个不太理想的解决方案。当然，如果属性选择器需要特定于浏览器的解决方法，它将更加优雅。 – 2010-01-21 20:55:30

即使应用了多个类，使用class属性也是一种方法。也许从你的角度来看它并不优雅，但它并不是特例。（单独使用一个空格的2个类） – ZippyV 2010-01-21 21:04:35

我第二次使用类，因为它们也将在不支持属性选择器的浏览器中工作。 – 2010-01-21 21:06:51

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

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

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

来源

2010-01-21 21:00:47

请确保您有在页面顶部定义DOCTYPE：Css attribute selector for input type="button" not working on IE7

来源

2010-09-23 14:54:44 Sofox

感谢您的提示。但是，我总是指定一个DOCTYPE。我的问题不是IE没有评估选择器，而是IE没有触发重新评估CSS属性的改变。 – 2010-09-23 19:15:00

检查以确保你在你的页面的顶部定义的DOCTYPE：Css attribute selector for input type="button" not working on IE7

来源

2010-09-23 14:58:28 Sofox

属性选择器，JavaScript和IE8

回答

相关问题