我想在 2 个 CSS 工作表之间切换。我几乎可以使用代码 - 但它只切换一次,而且我不确定实现切换的最佳方式,以便我可以来回切换。
我想用一个按钮在“normal.css”和“highContrast.css”之间切换,并在每次更改时更新按钮的文本。
在我的 HTML 中我有:
<div class="high">
<button class="normal" id="myButton" value="Hover" onclick="changeClass('css/highContrast.css', 0)" ">High Contrast Mode</button>
</div>
在我的 JS 中我有:
<script>
function changeClass(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
document.getElementsByClassName("normal").setAttribute("text", "Normal mode");
var div = document.getElementById ("myButton");
div.onclick= "changeClass('css/style.css', 0)";
}
</script>
除了将 highContrast.css 作为参数传递给我,最好的方法是在 2 个 CSS 文件之间切换?我正在考虑使用 for 循环和 % 2 来完成它....但我确信有更简洁的方法。
另外,最后一 block ,更新文本,也不起作用。我假设我错误地定位了文本,我可以修复它以使用 switch 语句正确更新,但我不确定如何编写它。
最佳答案
您可以根据当前显示在 myButton 按钮上的文本来决定选择哪个 css 文件。如果是“高对比度模式”,则使用另一个,反之亦然。
类似于:
function changeClass() {
var text = document.getElementById("myButton").firstChild.data;
switch (text) {
case "High Contrast Mode":
// apply normal mode css
// switch text on button
document.getElementById("myButton").firstChild.data = "Normal Mode";
break;
case "Normal Mode":
// apply high contrast mode css
// switch text on button
document.getElementById("myButton").firstChild.data = "High Contrast Mode";
break;
}
}
关于javascript - 在 2 个 CSS 工作表之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56167955/