1

Lets say that I wanna change the styles of my web page by clicking a buttom, I have a link to the file css/styles.css, it has the first styles, so if I click a button, colors must change (those colors are in another css file);

should i select the atribute href and replace the value for the new file css/styles2.css. with JS

Or what would be the best way to do it?

Thanks for your help

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/all.min.js"></script>
    <title>Document</title>
</head>
J P
  • 313
  • 3
  • 12
  • Does this answer your question? https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page. please do have a research before asking – Akhi Akl Jan 10 '20 at 05:39
  • Does this answer your question? [Replacing css file on the fly (and apply the new style to the page)](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page) – Awais Jan 10 '20 at 06:07

2 Answers2

1

This will edit the existing style tag. 

$("#mybtn").on("click",function(){
  $('link[href="css/styles.css"]').attr("href","css/styles2.css");
});
<button id="mybtn">Change Style</button> //Let this is the button to change styles
Sibtain
  • 108
  • 16
1

Trythis:

<html>
 <body>
    <button type="button" id="btn" style="background-color:green" onclick="change_color()">
      Click
    </button>
    <script>
        function change_color() {
            document.getElementById("btn").style.backgroundColor = "red";
        }
    </script>
  </body>
</html>
Jayme
  • 1,776
  • 10
  • 28
Ramesh L
  • 11
  • 2