Question

我的html页面正文中有两个链接应该使另一个css文件加载，使网站变暗或变亮（网站默认为黑暗的css样式。）代码不工作，任何输入？

以下是JS的主要内容：

<link href="dark.css" rel="stylesheet" type="text/css">

<script type="text/JavaScript" language="javascript">
function light() {
document.write('<link href="light.css" rel="stylesheet" type="text/css">');
}

function dark() {
document.write('<link href="dark.css" rel="stylesheet" type="text/css">');
}
</script>

以下是正文中的链接：

  <a href="" onClick="light();">Light</a>&nbsp;<a href="" onClick="dark();">Dark</a>

谢谢！

Answer 1

你每次只写出一个新的css文件;你想改变现有的。

我认为这就是你想要的：

<link id="cssFile" id="cssFile" href="dark.css" rel="stylesheet" type="text/css">

<script type="text/JavaScript" language="javascript">
  function light() {
    document.getElementById("cssFile").href = "light.css");
  }

  function dark() {
    document.getElementById("cssFile").href = "dark.css");
  }

修改

这是一个更清洁的版本，适用于一个功能

<input type="button" value="light" onclick="css('light.css')" /> <input type="button" value="dark" onclick="css('dark.css')" /> function css(file) { document.getElementById("cssFile").href = file; }

请注意，对于非平凡的应用程序，通常不赞成附加dom级别0事件处理程序。

我在Chrome，IE和FF中对此进行了测试，看起来效果很好。

Answer 2

我会做类似的事情：

<a href="#" onclick="return setStylesheet('light')">Light</a>

function setStylesheet(type) {
    switch (type) {
        case 'light':
            var other = document.getElementById('darkStylesheet');
        break;
        case 'dark':
            var other = document.getElementById('lightStylesheet');
        break;
        default:
            return false;
    }

    if (other) {
        other.parentNode.removeChild(other);
    }

    if (document.getElementById(type + "Stylesheet")) {
        return true;
    }

    var link = document.createElement('link');
    link.id = type + "Stylesheet";
    link.href = type + ".css";
    link.rel = "stylesheet";
    link.type = "text/css";
    document.getElementsByTagName('head')[0].appendChild(link);
    return false;
}

JavaScript CSS交换函数调用

2 个答案: