Javascript - Add and Remove CSS file with one button

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>

Possible repeat - stackoverflow.com/questions/3182840/…

Nirvik Baruah
– Nirvik Baruah

2016-08-07 15:58:10 +00:00
Commented Aug 7, 2016 at 15:58 — Nirvik Baruah
– Nirvik Baruah, Commented Aug 7, 2016 at 15:58

adeneo · Accepted Answer · 2020-10-07 00:25:53Z

5

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

        }
    });
});

edited Oct 7, 2020 at 0:25

answered Aug 7, 2016 at 15:59

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ed Nez Over a year ago

Thanks! Works! My final code: <script> $(document).ready(function(){ $("#myButton").click(function(){ if ( $('#myStyle').length === 0 ) { var ls = document.createElement('link'); ls.rel="stylesheet"; ls.id="myStyle"; ls.href="myCSSfile.css"; document.getElementsByTagName('head')[0].appendChild(ls); } else { $('#myStyle').remove(); } }); }); </script>

Tariqul Islam Over a year ago

I think this href : 'myCSSfile.css'; line should not contain a terminator ;

Kiran Yallabandi · Accepted Answer · 2016-08-07 16:19:38Z

1

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>

edited Aug 7, 2016 at 16:19

answered Aug 7, 2016 at 16:14

Kiran Yallabandi

2,5842 gold badges24 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript - Add and Remove CSS file with one button

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related