更改样式表 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14292997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Style Sheet javascript
提问by Benji
I got this HTML code:
我得到了这个 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>
And in javascript.js I got this:
在 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;
I want to the style sheets to change while pressing this buttons. I can't figure out why it is not working.
我想在按下此按钮时更改样式表。我不明白为什么它不起作用。
采纳答案by Emil Ivanov
One guess would be the missing .cssproperty, another would be the fact that onclickis not a function, but a result from invoking one:
一种猜测是缺少.css属性，另一种猜测onclick是它不是函数，而是调用一个函数的结果：
Make all of .cssa string and assign functions to onclick:
制作所有.css字符串并将函数分配给onclick：
style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css"); };
回答by Libert Piou Piou
Transform "default".css into "default.css". Do the same for dark.css.
将“default”.css 转换为“default.css”。对dark.css 做同样的事情。
Then onclick takes a function as a value.
然后 onclick 将函数作为值。
style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css") };
回答by Dmitry
Hello it Won't work until you add onclick="" property in html So the final version will look like this: html
你好它不会工作直到你在 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 file
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");
}
