javascript - 使用 querySelectorAll 和特定的 innerHTML 更改项目的颜色

Question

只有当它是“Saldos”时，我才需要更改菜单下拉项。

我正在使用一个数组来选择所有父元素并将其传递给一个函数，该函数选择内部并检查它是否包含文本。

但是，即使我输入了 if(1)，它也不起作用。

var menuArrayHeader = document.querySelectorAll(".drawer__nav-item");

menuArrayHeader.forEach(verificarVermelho)

function verificarVermelho(menuItemParent){
    var menuItem =menuItemParent.querySelector(".drawer__nav-link");
    console.log(menuItem.innerHTML);

    if(menuItem.innerHTML.includes("Saldos")){
        menuItem.style = "color: red !important;";
    }
}

我正在测试代码的网站是https://www.karitaideale.com.br/pages/karita

标签： javascriptcssdom

Answer 1

检查.innerText而不是innerHTML查找该容器内的实际文本。

menuArrayHeader.forEach(verificarVermelho)

function verificarVermelho(menuItemParent){
    var menuItem = menuItemParent.querySelector( ".drawer__nav-link" );
    console.log( menuItem.innerText );

    if( menuItem.innerText === "Saldos" ) ) {
        $( menuItem ).attr( 'style', 'color: red !important;' );
    }
}

另外，请记住，您需要在 中的a子元素上设置 color 属性，li以覆盖该元素color: #000上已设置的属性a。

“Karita”网站截图：