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

2 Answers 2

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.