时间戳

首页 > 解决方案 > 更改 JS 中的类属性 - 更好的性能

javascript - 更改 JS 中的类属性 - 更好的性能

问题描述

我有两个类需要即时更改颜色属性。问题是我写的代码非常慢，因为这些类在我的代码中出现超过 100 次。

有什么热门建议可以使此代码性能更好吗？

if (mainColor) {
    var elColors = document.querySelectorAll('.color')
    elColors.forEach(el => el.style.color = mainColor)
    var elBgColors = document.querySelectorAll('.bg-color')
    elBgColors.forEach(el => el.style.backgroundColor = mainColor)
}

（mainColor 来自用户输入）

标签： javascriptjquerycss

解决方案

为了高性能，不要为每个设置样式。

只需为父节点分配一个新类。

例如：

以动态方式 - JavaScript：

var styles = document.querySelector('head style#dynamic'),
    sheet;

if (!styles) {
    styles = document.createElement('style');
    styles.id = 'dynamic';
    document.querySelector('head').appendChild(styles);
}

sheet = styles.sheet;
sheet.insertRule("body.mainTheme .color { color: red; }", 0);
sheet.insertRule("body.mainTheme .bg-color { background-color: blue }", 0);

if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

以静态方式 - JavaScript 部分：

// jQuery: $('body').addClass('mainTheme');
if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

以静态方式 - CSS部分：

.mainTheme .color {
    color: red;
}
.mainTheme .bg-color {
    background-color: blue
}

推荐阅读