Javascript - 一键添加和删除 CSS 文件答案

【问题标题】：Javascript - Add and Remove CSS file with one buttonJavascript - 一键添加和删除 CSS 文件
【发布时间】：2020-10-07 08:25:53
【问题描述】：

我创建了一个将 CSS 文件添加到页眉的按钮。如何通过第二次单击同一按钮从标题中删除此 CSS？

谢谢

<script>
$(document).ready(function(){
  $("#myButton").click(function(){
  var ls = document.createElement('link');
  ls.rel="stylesheet";
  ls.href="myCSSfile.css";
  document.getElementsByTagName('head')[0].appendChild(ls);
    });

});
</script>


<button id="myButton">Add / Remove</button>

【问题讨论】：

可能重复 - stackoverflow.com/questions/3182840/…

标签： javascript jquery onclick

【解决方案1】：

添加一些东西来标识样式标签，一个ID似乎合适

$(document).ready(function(){
    $("#myButton").on('click', function(){

        if ( $('#myStyle').length === 0 ) { // does not yet exist

            $('<link />', {
                id   : 'myStyle',
                rel  : 'stylesheet',
                href : 'myCSSfile.css'
            }).appendTo('head');

        } else { // exists, remove it

            $('#myStyle').remove();

        }
    });
});

【讨论】：

谢谢！作品！我的最终代码：
我认为href : 'myCSSfile.css';这一行不应包含终止符;

【解决方案2】：

除了上面的答案，您还可以这样做。此代码可帮助您根据您包含的css 文件识别link 标签，无需使用id 属性专门识别链接标签：

<script>
$(document).ready(function(){
  $("#myButton").click(function(){


        if($("link[href*=myCSSfile]").length){
            $("link[href*=myCSSfile]").remove();
        }
        else{
            var ls = document.createElement('link');
            ls.rel="stylesheet";
            ls.href="myCSSfile.css";
            document.getElementsByTagName('head')[0].appendChild(ls);
        }
    });

});
</script>


<button id="myButton">Add / Remove</button>

【讨论】：