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

使用属性设置元素样式的更好方法是使用自定义元素属性和这些属性的特定CSS规则。

注意：如果要通过HTML验证，则属性名称必须为prefixed，并带有'data-'。它们也不应包含任何大写字母。

在以下示例中，您将看到在将属性设置为元素时，如何应用[data-myAttribute] CSS选择器声明的样式：

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>

Answer 2

您需要为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动态计算值时，类切换会更好。

使用removeAttribute（）和setAttribute（）更新内联样式不会更新

2 个答案: