更改样式表 javascript

IT技术 javascript
2021-03-02 18:10:30

我得到了这个 HTML 代码：

<head>
    <script type="application/javascript" src="javascript.js">
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button id="stylesheet1" > Default Style Sheet </button>
    <button id="stylesheet2" > Dark Style Sheet </button>
</body>

在 javascript.js 中我得到了这个：

function swapStyleSheet(sheet) {
    document.getElementById("pagestyle").setAttribute("href", sheet);  
}

function initate() {
    var style1 = document.getElementById("stylesheet1");
    var style2 = document.getElementById("stylesheet2");

    style1.onclick = swapStyleSheet("default".css);
    style2.onclick = swapStyleSheet("dark".css);
}

window.onload = initate;

我想在按下此按钮时更改样式表。我不明白为什么它不起作用。

3个回答

一种猜测是缺少的.css属性，另一种猜测是这onclick不是一个函数，而是调用一个函数的结果：

制作所有.css字符串并将函数分配给onclick：

style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css"); };

将“default”.css 转换为“default.css”。对dark.css 做同样的事情。

然后 onclick 将函数作为值。

style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css") };

你好它不会工作直到你在 html 中添加 onclick="" 属性所以最终版本看起来像这样： html

<head>
    <script type="application/javascript" src="javascript.js">
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button id="stylesheet1" onclick="initate();"> Default Style Sheet </button>
    <button id="stylesheet2" onclick="onclick="initate();"> Dark Style Sheet </button>
</body>

Javascript文件

function swapStyleSheet(sheet) {
    document.getElementById("pagestyle").setAttribute("href", sheet);  
}

function initate() {
    var style1 = document.getElementById("stylesheet1");
    var style2 = document.getElementById("stylesheet2");

    style1.onclick = swapStyleSheet("default.css");
    style2.onclick = swapStyleSheet("dark.css");
}
你能检查一下你的答案吗？我想你在那里放了一个额外的点击。
2021-05-11 18:10:30
其它你可能感兴趣的问题
上一篇不能在javascript中使用“下载”作为函数名 下一篇如何使用 JavaScript 找到 1 和 N 之间所有数字的总和