JavaScript 元素背景颜色在网页上没有改变

Question

我正在尝试更改 <li> 元素的背景颜色，但它不起作用。我没有收到错误信息，只是网页上的颜色没有改变。我尝试了多种方法，例如为元素分配一个 class 名称，并在 CSS 和 linesin[0].style.backgroundColor = "white" 中使用该 class 名称，但没有工作。下面是我的 JS 代码：

var vals;
var rows;
var sum;
var rowsarr = [];
var avg;
var lines;
var linesin = [];
    function obser1() {
        const trades = document.querySelector('.scrollbar-dark');
        const observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.addedNodes.length) {
                    vals = [...mutation.addedNodes[0].querySelectorAll("span")].map(span => span.textContent);
                    lines = [...mutation.addedNodes[0].querySelectorAll("li")];
                    if (vals.length == 4) {
                        rows = vals[2];
                        rowsarr.push(rows);
                    }
                    if (vals.length == 3) {
                        rows = vals[1];
                        rowsarr.push(rows);
                    }
                    linesin.push(mutation.addedNodes[0]);
                    console.log(mutation.addedNodes[0]);
                    console.log(rows + "  rows");
                }
            })
            function arraysum(x, y) {
                return parseFloat(x) + parseFloat(y);
            }
            sum = rowsarr.reduce(arraysum);
            console.log(rowsarr.length + "  length");
            
            if (rowsarr.length >= 100 && rowsarr.length<115) {
                avg = sum / 50;
                console.log("average is  " + avg);
            }
            /*This is the problem*/
            if (rows > avg) {
                console.log(rows + "  large" + "  average  " + avg);
                console.log(linesin[0]);
                linesin[0].className = "large";
            }
        });
        observer.observe(trades, {
            childList: true,
            subtree: true,
            attributes: true,
            characterData: true
        })

下面是我的 CSS:

.large{
    background-color:whitesmoke !important;
}

谢谢。

Answer 1

使用addClass方法

linesin[0].querySelector('li').addClass('large');

JavaScript 元素背景颜色在网页上没有改变

JavaScript element background color not changing on the web page

javascript

google-chrome-extension