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

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 2

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

using jQuery:

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

Answer 3

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