How to change the CSS of entire page/website on click?


Tags: javascript,html,css,stylesheet

Problem :

Is it possible to have 3-4 CSS on a page, and then on any event, say click, change the css for entire webpage. This way we can give our user the ability to change the theme. I know we can change the css of an element by:

$("#myElementID").removeClass("class1").addClass("class2");


Solution :

Yes, it is possible. Typically what you would do is write a JavaScript function that will change, or add, or remove a style sheet from the <head> of the document. To make the experience a little better you'll typically store the user's preference in a cookie. There's an article on A List Apart that show how to implement this.

And of course, you can do this with jQuery... you may want to check out the source of jStyler.


    CSS Howto..

    using jquery show/hide doesn't keep css in div

    CSS Less changes not showing. Compile or IIS error?

    HTML/CSS: how to expand a table row i only one direction?

    how to set individual scroll for content and left menu

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?

    How do I change my link's image on click?

    CSS - HTML how to make the anchor image go to a specific spot

    how to scroll down|up animatedly in jquery css?

    How to concat js/css files and replace in html using gulp?

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    How can I center an iframe but also have it display inline?

    How to prevent a span from breaking into the next line - responsive webdesign?

    how do i place a text upperright side of the image?

    CSS: Hover in one DIV, how to display information from another DIV?

    How to center bootstrap navba-nav on scroll when fixed?

    How to use CSS to shift my menu div to the right?

    drupal themes: how do I include several css files / js files on my theme's .info file?

    How to calculate gradient color replacements?

    How to correctly style drop-down menu

    How can I have an image float next to a centered div?

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    How can I remove vertical padding from ionic icon?

    Having 2 css code blocks in html files how to make only one work using JS?

    How to use calc in CSS for mozilla firefox without position absolute

    How to I change this css psuedo button in Javascript/Jquery

    how to change button icon on click?

    CSS how to fill remaining space (1 div with smaller divs)

    How to pause css animation at orginal state

    How can I align to center floated divs?