选中复选框时更改 CSS 样式表答案

【问题标题】：Change CSS Stylesheet when checkbox is marked选中复选框时更改 CSS 样式表
【发布时间】：2019-10-22 23:58:35
【问题描述】：

我试图在 HTML 中创建一个复选框，它使用 JS 将当前样式表更改为另一个样式表。

选中复选框后样式没有改变。这是我收到的错误消息： Error Message

这是我写的代码：

HTML：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Normal Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="pageStyle" rel="stylesheet" href="style.css">
    <script>
        function swapStyleSheet(sheet) {

        if (document.getElementById("lightSwitch").checked == true) {

        document.getElementById("pageStyle").set.Attribute('href', sheet) = "dark.css";

            } 
        else {

        document.getElementById("pageStyle").set.Attribute('href', sheet) = "style.css";

            }
        }
    </script>
</head>
<body>

        <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">

</body>

感谢您为我澄清问题。

【问题讨论】：

但是发生了什么？
错字。它是一种属性：setAttribute 而不是set 的Attribute。删除.
设置属性方法无效函数必须是setAttribute document.getElementById("pageStyle").setAttribute('href', sheet) = "dark.css";

标签： javascript html checkbox

【解决方案1】：

我认为应该是这样的：

...
<script>
function swapStyleSheet() {
    if (document.getElementById("lightSwitch").checked) {
        document.getElementById("pageStyle").setAttribute('href', 'dark.css');
    } else {
        document.getElementById("pageStyle").setAttribute('href', "style.css");
        }
    }
</script>
</head>
<body>
    <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">
</body>

swapStyleSheet 没有获得任何属性，因为您调用它时没有属性onclick="swapStyleSheet()"。

setAttribute 是接收 2 个属性的方法。您不能像在此处所做的那样分配给方法结果Attribute('href', sheet) = "style.css";

否则看起来不错（虽然没有测试）。

【讨论】：

【解决方案2】：

.set.Attribute 不是有效的 JavaScript。使用.setAttribute。您也不能设置属性然后在同一行.set.Attribute('href', sheet) = "dark.css" 中分配它。而且您在 JavaScript 函数 function swapStyleSheet(sheet) 中使用了一个参数，但在调用您的函数 onclick="swapStyleSheet()" 时没有对它做任何事情。

由于.css 文件未共享，因此无法对此进行测试。但是尝试将您的代码更改为：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Normal Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="pageStyle" rel="stylesheet" href="style.css">
     <script>
        function swapStyleSheet() {

        if (document.getElementById("lightSwitch").checked == true) {

        document.getElementById("pageStyle").setAttribute('href', "dark.css");

            } 
        else {

        document.getElementById("pageStyle").setAttribute('href', "style.css");

            }
        }
    </script>
</head>
<body>

        <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">

</body>

我清理了您的属性方法并删除了不需要的参数。希望这能帮助您找到正确的方向。

【讨论】：

【解决方案3】：

你做错了：

这是你的代码（解释）

<script>
    function swapStyleSheet(sheet) {
// This is expecting a parameter (the stylesheet you want, I suppose)

    if (document.getElementById("lightSwitch").checked == true) {

    document.getElementById("pageStyle").set.Attribute('href', sheet) = "dark.css"; //Here you are, first, invoking a function (wrong function because it's setAttribute and not set.Attribute) and then assigning it a value "dark.css"

        } 
    else {

    document.getElementById("pageStyle").set.Attribute('href', sheet) = "style.css";
//Same here

        }
    }
</script>

您的代码应该与此类似（有多种方法可以附加事件侦听器，但遵循您的相同结构）：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Normal Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="pageStyle" rel="stylesheet" href="style.css">
    <script>
        function swapStyleSheet(sheet) {

        if (document.getElementById("lightSwitch").getAttribute('checked') === true) {

        document.getElementById("pageStyle").setAttribute('href', "dark.css");

            } 
        else {

        document.getElementById("pageStyle").setAttribute('href', "style.css");

            }
        }
    </script>
</head>
<body>
        <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">

</body>

【讨论】：

“工作表”定义或赋值在哪里。这就是javascript的基础
在这种情况下我没有使用它。我什至可以将它从参数列表中删除，因为他正在根据复选框状态决定要使用的样式表。