javascript - 在 CSS3 或 HTML5 中更改元素背景颜色的有效方法

Question

我需要在重新排序或删除一个元素后更改列表中每个元素的颜色，现在我正在使用 jquery 的 css 方法，如下所示

$('li').css('background-color', color);

它可以工作，但非常慢，有时页面会错误地呈现颜色，即使在 Chrome 上也是如此，它应该很快。列表项不多，在10个以下，通常是5-7个。所以这种表现是不能接受的。所以我想知道在 CSS3 或 HTML5 中是否有更好、更快的方法。如果没有，是否有解决方法或某种 jquery 解决方案？

刷新列表项颜色的代码如下。索引可以由函数决定，颜色可以由它决定颜色。我认为主要问题是改变背景颜色会触发回流或重新渲染。

function refreshListItemColor(liElements, colorGetter, indexGetter) {
        colorGetter = colorGetter || (function (color) {
            return color;
        });
        indexGetter = indexGetter || (function (liElement, index) {
            return index;
        });
        liElements.each(function (index, liElement) {
            index = indexGetter(liElement, index);
            var data = ko.dataFor(liElement);
            var indexColor = colorForIndex(index);
            indexColor = colorGetter(indexColor, data);
            if (indexColor !== $(liElement).css('background-color')) {
                $(liElement).css('background-color', indexColor);
            }
        });
}

更新:使用 element.style['background-color'] 不行。问题仍然存在。另一个可能的滞后解释是每个列表项本身都有大约 10 个子元素，这使得更改列表项的颜色特别昂贵。

Update2:我会试着问一个相关的问题:有没有办法在不触发子元素重新渲染的情况下改变父节点的背景颜色？

Update3:我尝试为每个颜色更改操作添加延迟，如下所示

var delay = 100, step = 100;
liElements.each(function (index, liElement) {
    index = indexGetter(liElement, index);
    var data = ko.dataFor(liElement);
    var indexColor = colorForIndex(index);
    indexColor = colorGetter(indexColor, data);
    if (indexColor !== $(liElement).css('background-color')) {
        setTimeout(function () {
            liElement.style['background-color'] = indexColor;
        }, delay);
        delay += step;
    }
});

看来可以大大缓解这个问题。我想这不会解决问题，但会将影响降低到可接受的水平。

Answer 1

你能用attribute selectors吗？在你的样式表中？

[data-row="1"][data-col="3"]{
    background-color: blue;
}

我注意到，如果你想选择整行或整列，你必须使用 !important

[data-col="3"]{
    background-color: blue !important;
}

---

(edit)动态添加样式
用 div 创建一个空的样式标签

<style type="text/css" id="dynamicstyle"></style>

像其他标签一样附加到它

$("#dynamicstyle").append('[data-row="0"]{background-color:red !important;}');

对于您的情况，您可以检查何时添加元素并添加行样式，因为理论上用户可以堆积所有元素。

$(function () {
var maxRows = 0;
$("ul").bind("DOMSubtreeModified", updateStyleSheet);

function updateStyleSheet() {
    var childCount = $("ul").children().length;
    if (maxRows < childCount) {
        maxRows = childCount;
        var newRule = [
            '[data-row="',
        maxRows,
            '"]{background-color:', ((maxRows % 2) ? "red" : "blue"),
            ' !important;}'].join('')
        $("#dynamicstyle").append(newRule);
    }
}
});

http://jsfiddle.net/PgAJT/126/

FizzBu​​zz 行 http://jsfiddle.net/PgAJT/127/