Question

我有一个样式表我正在基于用户UI动态更新内容。我注意到在Firefox（使用stylesheet.innerHTML）和IE（使用stylesheet.styleSheet.cssText）工作得很好。

似乎Chrome和Safari（使用stylesheet.innerText）在较大的样式表上运行得非常慢。有没有人碰到这个和/或找到更好的解决方案？

修改由于应用程序永远不会刷新并且用户可以切换“页面”从而使内联样式中断，因此无法使用JS来更改内联样式。此外，如果我想使用UI修改链接，我不能使用内联来修改伪类，例如：hover（据我所知）

Answer 1

所以这是我在过去一年左右更新样式表的功能：

function(style, style_value) {

  if ('cssText' in style.styleSheet) {

    // without this line, IE WILL crash, if no stylesheet settings were set
    if ( typeof(style_value) != 'string' || !style_value.length) {
      return;
    }
    style.styleSheet.cssText = style_value;

  }
  else {
    style.innerHTML = style_value;
  }

}

Answer 2

有意义的是，重新分析CSS和回流文档可能会很慢。我建议包含你可能需要的所有规则，但是在<html>元素上使用类“命名”它们，然后通过添加和删除类而不是使用cssText / innerText来更改活动规则。

CSS：

.foo h1 { color: green }
.bar h1 { color: red }

JavaScript的：

document.documentElement.className = new Date().getHours() >= 12 ? 'foo' : 'bar';

这会破坏<html>元素上的任何其他类名，因此通过jQuery（或等效的）进行更仔细的解析或切换类通常是合适的。

如果您的JavaScript知道实际需要更改的CSS规则，您还可以动态修改样式规则。在实践中，这类似于修改任何元素样式，即myElement.style.color = 'green'; Opera Web课程具有good explanation of modifying CSS via JavaScript。

修改单个规则的跨浏览器方法示例：

var modifyStyleRule;

(function(doc){
    var sheets = doc.styleSheets,
        rules = 'cssRules';
    rules = sheets[0][rules] ? rules : 'rules';

    modifyStyleRule = function (sheetIndex, ruleIndex, propertyValues) {
        var style = sheets[sheetIndex][rules][ruleIndex].style,
            prop;

        for (prop in propertyValues) {
            if (propertyValues.hasOwnProperty(prop)) {
                style[prop] = propertyValues[prop];
            }
        }
    };
})(document);

示例用法：modifyStyleRule(0, 0, {color: 'red'});。

请注意，根据您使用此更改的类型和数量（颜色与尺寸/位置），这可能非常容易而不是sheet.innerHTML或等效。这种技术不时会派上用场，当与“样式命名空间”结合使用并交换类名时，仍然可以进行大的更改。

Answer 3

如果您想让浏览器独立使用此代码：

var field = document.getElementById(id);  // where u want to use innertext

if(field != null)
{           
    if(navigator.appName == "Netscape") // appName for both FireFox and Chrome its is "Netscape" i checked it with different version.
        field.textContent = value;
    else // for For IE v 8 i checked  .textContent is not supported by IE for me it was not working. 
        field.innerText = value;    
}

用.innerText缓慢更新样式表的内容

3 个答案: