Changing a stylesheet using jQuery

Question

How can I change a stylesheet using jquery in div tag on html? or what is the jquery code for changing stylesheets?

in javascript, we use the below code :

Answer 1

I use this code to enable or disable a stylesheet based on a page.

 $(document).on('pagebeforeshow', function () {
        var URL = $.mobile.path.parseUrl(window.location).toString().toLowerCase();

        if (URL.indexOf("/investment.aspx") > -1 ||
            URL.indexOf("/employees.aspx") > -1) {
            $("link[href^='../../Public/LongLabels.css']").attr("media", "all");
        }
        else {
            $("link[href^='../../Public/LongLabels.css']").attr("media", "not all");
        }
    });

Answer 2

document.getElementById('stylesheet').href = 'design4.css';

using jQuery:

$("#styleshhet").attr('href', 'design4.css');

Answer 3

For updating full theme it's best to load a new CSS file. Easiest done on the server side but if you insist on loading dynamically:

// Don't know jQuery, this is regular JS:
var newCss = document.createElement('link');

newCss.rel = 'stylesheet';
newCss.type = 'text/css';
newCss.href = '/path/to/new/cssfile.css';

document.body.appendChild(newCss);

Answer 4

there are better ways to do what you're asking but if you really want to remove and add a remote stylesheet with jquery you can do this:

$('link[href^=old_css_file.css]').attr('href', '/path_to_new_css/file.css');

read more about the ^= attribute selector and the attr() function