Обновление встроенного стиля с помощью removeAttribute () и setAttribute () не обновляется

Question

Обновленный встроенный стиль определенного тега абзаца не отображает новые обновления.

Я использую следующий пример, который я обнаружил при переполнении стека:

var para = document.getElementsByTagName('div');
var len = para.length;

for (var i = 0; i < len; ++i) {
    if(para[i].innerHTML.indexOf("SOME TEST") !== -1) {
        para[i].removeAttribute('style');
        para[i].setAttribute('style', 'FONT-SIZE: 100px !important; FONT-FAMILY: Arial !important; color:red;');
    }

}

Когда я смотрю наинструмент инспектора, я могу видеть стиль, который я реализовал.Однако стилизация не выполняется.

Что я делаю не так?Я пытаюсь сделать эту работу для IE8 и ниже

Answer 1

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

var para = document.getElementsByTagName('div');
var len = para.length;

for (var i = 0; i < len; ++i) {
    if(para[i].innerHTML.indexOf("SOME TEST") !== -1) {
        para[i].style.cssText = 'FONT-SIZE: 100px !important; FONT-FAMILY: Arial !important; color:red;';
    }

}

С другой стороны, я согласен с тем, что другие высказали мнение, что переключение классов лучше, когда вы не используете JS для динамического вычисления значения.

Answer 2

Лучшим подходом для стилизации элемента с использованием атрибутов будет использование пользовательских атрибутов элемента и определенных правил CSS для этих атрибутов .

Примечание : Если вы хотите пройти валидацию HTML, имена ваших атрибутов должны быть с префиксом с 'data -' .Они также не должны содержать заглавных букв.

В следующем примере вы увидите, как применяются стили, объявленные с помощью селектора CSS [data-myAttribute], когда атрибут установлен для элемента:

var myElement = document.getElementById('myElement');

// click event handler compatible with IE8
myElement.onclick = function clickHandler(e){
  // toggle the 'data-myAttribute' attribute
  if( myElement.hasAttribute('data-myAttribute') ){
    myElement.removeAttribute('data-myAttribute');
  }else{ 
    myElement.setAttribute('data-myAttribute', true);
  }
}

[data-myAttribute]{
  text-decoration : underline;
  color : red;
}

<div id="myElement">click me</div>