Question

我需要在html页面的头部选择样式元素并将其从dom中删除，而不使用jquery。

知道该怎么做吗？

<html>
    <head>
        <style type="text/css">
            p {
                color:blue;
            }
        </style>
    </head>
    <body>
        <p>A paragraph.</p>
    </body>
</html>

我正在尝试此代码但没有成功：

var styleSheetList = document.styleSheets;
document.styleSheets.length = 0;
console.log('+++ styleSheetList ELEMENT' + styleSheetList);

Answer 1

您可以像这样使用document.getElementsByTagName()：

var els = document.getElementsByTagName( 'style' );
for( var i=els.length; i--; ) {
  els[i].parentNode.removeChild( els[i] );
}

但请注意，删除<style>元素不会删除它引入的样式！

Answer 2

获取<style>标记，然后您需要选择父级以从DOM中删除它。 （假设，样式标签是TITLE之后HEAD中的第二个标签）

var styleTag = document.getElementsByTagName("style");
var headTag = styleTag[0].parentNode;
headTag.removeChild(headTag.childNodes[1]);

以下代码是通用的，无论STYLE的位置如何

var styleTag = document.getElementsByTagName("style");
var headTag = styleTag[0].parentNode;

for(var i=0; i<headTag.childNodes.length; i++)
{
    if(headTag.childNodes[i].nodeName === "STYLE")
        headTag.removeChild(headTag.childNodes[i]);
}

如何在JavaScript </style>中选择<style type =“text / css”>

2 个答案: