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 :

<script type="text/javascript">
 function changeStyle() {
 document.getElementById('stylesheet').href = 'design4.css';
 }
</script>

Is there a jQuery way?

Answer 1

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

Answer 2

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 3

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

using jQuery:

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

Answer 4

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");
        }
    });