Fatal编程技术网
  • javascript/
  • Javascript 标记复选框时更改CSS样式表

Javascript 标记复选框时更改CSS样式表

javascript html checkbox

Javascript 标记复选框时更改CSS样式表,javascript,html,checkbox,Javascript,Html,Checkbox,我试图在HTML中创建一个复选框，使用JS将当前样式表更改为另一个样式表 在我选中复选框后，样式没有改变。 以下是我收到的错误消息： 以下是我编写的代码： HTML: 正常标题 功能交换样式表（表）{ if（document.getElementById（“lightSwitch”）.checked==true）{ document.getElementById（“pageStyle”）.set.Attribute（'href'，sheet）=“dark.css”； } 否则{ docum

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

在我选中复选框后，样式没有改变。 以下是我收到的错误消息：

以下是我编写的代码：

HTML:


正常标题
功能交换样式表（表）{
if（document.getElementById（“lightSwitch”）.checked==true）{
document.getElementById（“pageStyle”）.set.Attribute（'href'，sheet）=“dark.css”；
} 
否则{
document.getElementById（“pageStyle”）.set.Attribute（'href'，sheet）=“style.css”；
}
}

谢谢你为我澄清这个问题。

我想应该是这样的：

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

。。。
函数交换样式表（）{
if（document.getElementById（“lightSwitch”）.已选中）{
document.getElementById（“pageStyle”）.setAttribute（'href'，'dark.css'）；
}否则{
document.getElementById（“pageStyle”）.setAttribute（'href'，“style.css”）；
}
}
swapStyleSheet不会获取任何属性，因为您在调用它时没有属性
onclick=“swapStyleSheet（）”

setAttribute是接收2个属性的方法。您不能像这里那样将属性（'href'，sheet）=“style.css”分配给方法结果

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

您做错了：

这是您的代码（已解释）


功能交换样式表（表）{
//这需要一个参数（我想是您想要的样式表）
if（document.getElementById（“lightSwitch”）.checked==true）{
document.getElementById（“pageStyle”）.set.Attribute（'href'，sheet）=“dark.css”；//首先调用一个函数（错误的函数，因为它是setAttribute而不是set.Attribute），然后给它赋值“dark.css”
} 
否则{
document.getElementById（“pageStyle”）.set.Attribute（'href'，sheet）=“style.css”；
//这里也一样
}
}
您的代码看起来应该与此类似（有多种方法可以附加事件侦听器，但这与您的结构相同）：


正常标题
功能交换样式表（表）{
if（document.getElementById（“lightSwitch”）.getAttribute（'checked'）==true）{
document.getElementById（“pageStyle”）.setAttribute（'href'，“dark.css”）；
} 
否则{
document.getElementById（“pageStyle”）.setAttribute（'href'，“style.css”）；
}
}

.set.Attribute
不是有效的JavaScript。使用
.setAttribute
。此外，您不能设置属性，然后在同一行
.set.Attribute（'href'，sheet）=“dark.css”
中分配属性。您在JavaScript函数
函数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>


正常标题
函数交换样式表（）{
if（document.getElementById（“lightSwitch”）.checked==true）{
document.getElementById（“pageStyle”）.setAttribute（'href'，“dark.css”）；
} 
否则{
document.getElementById（“pageStyle”）.setAttribute（'href'，“style.css”）；
}
}
我清理了属性方法并删除了不需要的参数。希望这能帮你找到正确的方向。

但是发生了什么？打字错误。它是一个属性：
setAttribute
不是
set
的
Attribute
。删除
Set attribute方法无效函数必须是setAttribute document.getElementById（“pageStyle”）.setAttribute（'href'，sheet）=“dark.css”；“图纸”的定义或赋值在哪里。这是JavaScription的基础，在本例中，我没有使用它。我甚至可以从参数列表中删除它，因为他正在根据复选框状态决定要使用什么样式表。 
<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>

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