Question

请注意我没有上课。我还没有找到这个具体问题的答案。

使用javascript，如何在每次点击按钮时编程按钮来更改样式表？

我尝试了不同的if，否则if和else，但是当我尝试它们时，它会破坏代码（即，如果是红色，它会将颜色更改为蓝色，但不会再返回）。
它适用于2个按钮，但每次单击一个按钮时更改它似乎是在逃避我。我得到了补给并编程了第二个按钮来改变它。

这适用于2个按钮：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>"Your Title Here"</title>
    <link id="um" rel="stylesheet" href="stylesheet1.css">
        <style>
        </style>

</head>

<body>
<p>booga</p>
<button id="x" onclick="myFunction()">blue</button>
<button id="x1" onclick="myFunction1()">red</button>

<script>
function myFunction() {
if (document.getElementById("um").href = "stylesheet1.css"){
document.getElementById("um").href = "stylesheet2.css"} 
}
function myFunction1() {
if (document.getElementById("um").href = "stylesheet2.css"){
document.getElementById("um").href = "stylesheet1.css"} 
}
</script>
</body>

我希望能够摆脱第二个按钮和第二个功能，只需一个按钮即可完成。

...编辑我试过这个，但它失败了。

    function myFunction() {
if (document.getElementById("um").href == "stylesheet1.css")
{document.getElementById("um").href = "stylesheet2.css"}; 
else {document.getElementById("um").href = "stylesheet1.css"} 
}

Answer 1

确保您使用==而不是=进行比较！

if (document.getElementById("um").href == "stylesheet1.css")

等

Answer 2

试试这个：

<button id="x" onclick="myFunction()">Change</button>

<script>

    function myFunction() {
      var link = document.getElementById("um");
      var segments = link.href.split('/');
      var currentStyle = segments[segments.length - 1];
      var style =  (currentStyle == 'stylesheet1.css') ? 'stylesheet2' 
                                                       : 'stylesheet1';
      document.getElementById("um").href = style + ".css"
    }

</script>

Answer 3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>"Your Title Here"</title>
    <link id="um" rel="stylesheet" href="stylesheet1.css">

</head>

<body>
<p>booga</p>
<button onclick="myFunction('um','stylesheet1.css', 'stylesheet2.css')">swap</button>

<script>
function myFunction(id,a,b) {
    var el = document.getElementById(id);
    var hrefStr;
    if(~el.href.indexOf(a)) {
        hrefStr = el.href.replace(a, b);
        el.href = hrefStr;
    } else {
        hrefStr = el.href.replace(b, a);
        el.href = hrefStr;
    }
}
</script>
</body>
</html>

如何使用javascript编程按钮来更改样式表

3 个答案: