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>
...

使用以下脚本我尝试删除CSS，其中包含＆＃39; .gm＆＃39;：

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

为您的<style>代码添加ID，然后您就可以使用Javascript选择<style>代码，并使用remove()方法让它神奇地消失。相关的样式也将被删除。

<强> HTML：

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

<强> JS：

var style= document.getElementById("style");
style.remove();

Answer 2

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>

如果您有一些标签，您可以精确定位所需的标签。

Answer 3

HTRIGHT

如果您需要删除多个(() => { 'use-strict'; let needle = '.gm-style'; if ( needle === '' || needle === '<style>' ) { needle = '.?'; } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) { needle = needle.slice(1,-1); } else { needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } needle = new RegExp(needle); let cssnode = () => { let css = document.querySelectorAll('style'); for (let cs of css) { if (cs.outerHTML.match(needle)) { cs.remove(); } } }; if (document.readyState === 'interactive' || document.readyState === 'complete') { cssnode(); } else { addEventListener('DOMContentLoaded', cssnode); } })();标签，则也有正则表达式支持。

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

3 个答案: