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

Question

I created a button that ADD CSS file to the page header. How Can I REMOVE this CSS from the header with the second click on the same button?

Thanks

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

Answer 1

Just add something to identify the style tag, an ID seems appropriate

$(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();

        }
    });
});

Answer 2

In addition to the answer above you could also do this. This code helps you to identify the link tag on the basis of the css file you included, no need to specially identify the link tag using the id attribute :

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