Селекторы атрибутов, 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. Когда атрибут highlight изменяется JavaScript, цвет фона элемента изменяется соответствующим образом. В IE8, однако, это другая история. Элемент будет отображаться правильно в соответствии со значением выделения, которое изначально назначено в HTML, но при динамическом изменении атрибута отображение элемента не изменяется.

Это известная причуда, и есть ли обходной путь?

Обновление Я просто изменил имя атрибута на «frob» со значениями «on» и «off». Это должно решить любую проблему с зарезервированными или интерпретируемыми значениями.

Еще одна вещь, которую стоит отметить. Когда я включаю инструменты разработчика IE8 и использую инспектор HTML, он будет отображать стиль [frob = on] или [frob = off], применяемый для любого значения, которое было у frob при запуске инспектора документов. Однако атрибут frob больше не будет меняться в представлении инспектора. Ни в коем случае значения в [frob = on / off] css никогда не будут применены после первоначального рендеринга HTML.

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

Answer 1

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

Просто используйте class="hightlight" - проще в реализации и работе.

Answer 2

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

Можете ли вы попробовать

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

Answer 3

Убедитесь, что в верхней части страницы определен DOCTYPE: Селектор атрибута Css для типа ввода = «кнопка» не работает в IE7

Answer 4

Убедитесь, что в верхней части страницы определен DOCTYPE: Селектор атрибута Css для типа ввода = "кнопка" не работает в IE7

Answer 5

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

.

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

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