Modifying a stylesheet using jQuery

Question

How to change stylesheet using jquery in div tag on html? or what is jquery code to change style sheets?

in javascript, we use the code below:

<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 ask, but if you really want to delete and add the remote stylesheet using jquery, you can do this:

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

More on ^= attribute selector and attr() function

Answer 2

To update the full theme, it is best to download a new CSS file. The easiest way to do this is on the server side, but if you insist on dynamic loading:

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

How to load CSS files using Javascript?

Here is something similar that works well, Loading css with jquery

Answer 5

I use this code to enable or disable page-based stylesheets.

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