Good all the time of day.

On April 1, on YouTube, near the icon of the author, the video saw a wonderful button (switch), when clicked, the page changed style from one to another, and the page did not reload, even the video.

Tell me, how can this be implemented? (We have style / style1.css and style / style2.css).

    5 answers 5

    <html> <head> <script type="text/javascript"> window.onload = function() { document.getElementById('SuperButton').onclick = function() { if(document.body.className != 'new_class') { document.body.className = 'new_class'; } else { document.body.className = ''; } } } </script> <style> body { background: #23ff0c; min-height: 100%; } .new_class { background: #FF0; } </style> </head> <body> <button id="SuperButton" name="SuperButton">Super Button</button> </body> </html>
    • for a complete change of page style, such a method would be too verbose ... - Yura Ivanov
    • TS'a in fact more magic button interested) It is clear that from the point of view of a global change of style, the approach needs a different one. - Palmervan

    This is usually implemented through a special class, for example, the body tag.

     body.style1 {background:#fff} body.style1 a{color:#cc0000;} body.style2 {background:#000} body.style2 a{color:#ccc;}

    and by clicking on the button this class is manipulated, and all styles in one file

    • Interesting, let's say I have 2 classes for body (body1, body2), but I don’t have an idea how to write a button like 8- ( - sergey
    • $ ('changeStyleButton'). click (function () {$ ('body'). addClass ('style2');}); - makregistr

    Here's how the styles change in the jQuery UI Themeroller production (Themes tab).

    Here is the function that it does:

     //function to append a new theme stylesheet with the new style changes function updateCSS(locStr){ $("link[href*=parseTheme\\.css\\.php]:last").after('<link href="/themeroller/css/parseTheme.css.php?'+ encodeURIComponent( locStr ) +'" type="text/css" rel="Stylesheet" />'); if($("link[href*=parseTheme\\.css\\.php]").size() > 3){ $("link[href*=parseTheme\\.css\\.php]:first").remove(); } };

    Those. this is actually the answer @ inferus-vv , only jquery is used here, here it is just for convenience ...

    Works in opera, chrome, safari, fox, and even in ie. It also works on the android in the stock browser.

      • Add id attribute to link element which rel="stylesheet"
      • In the script, find this element and change its attribute href

      The page will not naturally reload, but the style sheet will load.

      In general, it is poorly with the support of rel = "alternate stylesheet".

      • my JS knowledge was enough for only <html> <body> <script type = "text / javascript"> function color (c) {document.body.style.backgroundColor = c} </ script> <input type = 'button' value = 'red background' onclick = 'color ("red")'> <input type = 'button' value = 'black background' onclick = 'color ("black")'> </ body> </ html> - sergey
      • @mixalef, no, no, I suggested changing the URL of the "main" style sheet. - karmadro4

      Like this

      • Thanks for the link, but I actually asked why not all of the proposed methods work in all browsers. the hunt to know the method that works with all browsers - sergey