如何使用javascript或jquery添加和删除外部CSS

Question

I am working with my webpage and I am using an external css, what I want is when the browser resize to it's minimum size, the pre-loaded stylesheet will remove and replace it with the new one which is for the minimum size of the browser. But I don't know how to do that stuff. Can someone help me?

Answer 1

Your best bet in this situation is to use CSS media queries , eg:

@media (max-width: 200px) {
    /* ...styles to apply up to 200 wide... */
    body {
        /* ... */
    }
}

@media (min-width: 201px) {
    /* ...styles to apply when more than 200 wide... */
    body {
        /* ... */
    }
}

---

However, answering the question you actually asked:

The stylesheet added by a style or link element will be removed if you remove the element. So you can do:

$("selector for the old stylesheet").remove();

...to remove the old, then

$("<style>...</style>").appendTo('head');

...to add another (or, of course, a link element instead).

You can trigger the process using the resize event on the window :

$(window).on("resize", function() {
    // ...do something
});

Answer 2

Hi for my is very easy use a media queries on CSS

With mediaQueries in your file of css can manipulate the sizes of his elements depending on the device where it is displayed.

for example:

@media screen and(min-width:780px) and (max-width:1024px){Here the CSS for PC}

@media screen and(min-width:480px) and (max-with:780px){ Here the CSS for Tablets}

@media screen and(max-width:480px){ for Cellphones}

Answer 3

This can be done in a couple of lines of jQuery:

$(document).ready(function () {

 $("a").click(function () { $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />'); }); 

The key is at what time we add the link to the style sheet. The first line in the code above repeated here asserts that the DOM is ready for manipulation.

$(document).ready(function () {

 //... 

});

The second part repeated here adds a click event to taget Element in the page.

Answer 4

in to html:

<link rel="stylesheet" href="simple.css" media="screen and (min-width:500px)">

link media

in to css:

@media (min-width: 500px) and (max-width: 600px) {
        h1 {
          color: fuchsia;
        }

        .desc:after {
          content:" In fact, it's between 500px and 600px wide.";
        }
      }

media query

with jquery:

(function($){
    $(window).resize(function(){
        if($(this).width()>500){
            $('link[rel=stylesheet][href~="foo.com"]').remove();
            $('<link rel="stylesheet" href="styleMax.css"/>').appendTo('head');
        }
    });
}($));

jquery resize()

with javascript

html

<link id="minCSS" rel="stylesheet" href="stylemin.css">
<link id="medCSS" rel="stylesheet" href="stylemed.css" disabled>
<link id="maxCSS" rel="stylesheet" href="stylemax.css" disabled>
<link id="defaultCSS" rel="stylesheet" href="defaultCSS.css" disabled>

javascript

window.onresize=function(){
    if(this.innerWidth>500){
        document.getElementById("minCSS").disabled = true;
        document.getElementById("medCSS").removeAttribute('disabled');
    } else {
        document.getElementById("defaultCSS").removeAttribute('disabled');
    }
};

onresize