javascript - 使用纯 JavaScript 删除特定的内联 CSS

Question

我想删除以下内联 CSS:

<style type="text/css">.gm-style .gm-style-cc span, .gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style>
...

我尝试使用以下脚本删除包含“.gm”的 CSS:

var inline_css = document.querySelectorAll('style[innerText*=".gm"]');
if (inline_css) {
    for (var i = 0; i < inline_css.length; i++) {
        inline_css[i].parentNode.removeChild(inline_css[i]);
    }
}

但它不起作用。

Answer 1

querySelectorAll 返回 elements 的列表.从这些元素中，您可以匹配内部文本。如果它符合你的风格(完全)，你可以删除它。像这样:

var ar = document.querySelectorAll('style');
console.log("found styles: " + ar.length)
for(i = 0; i < ar.length; i++){
    if(ar[i].innerText.match('.gm')){
        ar[i].remove()
    }
}

// to check it worked
var ar = document.querySelectorAll('style');
console.log("remaining syltes: " + ar.length)

<style type="text/css">.gm-style .gm-style-cc span, .gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style>
<style type="text/css">.other .style{}
</style>

如果您有几个标签，您可以精确定位您需要的标签。