通过单击按钮使用 Js 更改样式文件答案

【问题标题】：changing styles file with Js by clicking a button通过单击按钮使用 Js 更改样式文件
【发布时间】：2020-01-10 05:35:41
【问题描述】：

假设我想通过单击按钮来更改网页的样式，我有一个指向 css/styles.css 文件的链接，它具有第一个样式，所以如果我单击一个按钮，颜色必须改变（这些颜色在另一个 css 文件中）；

我应该选择属性 href 并替换新文件 css/styles2.css 的值。用JS

或者最好的方法是什么？

感谢您的帮助

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

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/19844545/…。请在询问之前进行研究
这能回答你的问题吗？ Replacing css file on the fly (and apply the new style to the page)

标签： javascript css

【解决方案1】：

这将编辑现有的样式标签。

$("#mybtn").on("click",function(){
  $('link[href="css/styles.css"]').attr("href","css/styles2.css");
});

&lt;button id="mybtn"&gt;Change Style&lt;/button&gt; //Let this is the button to change styles

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：