Селекторы атрибутов, 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, когда я начал инспектор документов. Однако атрибут frob больше не будет изменяться в представлении инспектора. Ни в коем случае значения в [frob = on/off] css никогда не применяются после первоначального рендеринга HTML.

Обновление: проблема решена Решение состоит в том, чтобы заставить перерисовать. Существуют различные способы сделать это, но, похоже, стандартным является переназначение имени класса самому себе.

Answer 1

Вы устанавливаете атрибут JavaScript true и false, а не строку "true" и "false". Это может быть интерпретировано браузером как 1 и 0 и приводит к нежелательным результатам.

Вы можете попробовать

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

?

Answer 2

Вы используете неизвестный атрибут hightlight. Это IE, поэтому он поддерживает атрибуты в соответствии с его именем (что кажется сложнее, чем поддержка каждого имени атрибута, но ... это IE).

Просто используйте class="hightlight" - проще в применении и иметь дело с.

Answer 3

, чтобы избежать неизбежной проблемы с совместимостью между браузерами с javascript/css. Я бы рекомендовал использовать jQuery.

Например, чтобы выделить элемент через фреймворк jQuery, это все, что требуется ...

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

Answer 4

Убедитесь, что DOCTYPE, определенный в верхней части страницы: Css attribute selector for input type="button" not working on IE7

Answer 5

Проверьте, чтобы убедиться, что у вас есть DOCTYPE, определенный в верхней части страницы: Css attribute selector for input type="button" not working on IE7