使用 Javascript 切换 CSS 表格（点击时）

Question

试图找到只需一个按钮即可在两个样式表之间切换的代码。我试图适应其他人的解决方案，但无济于事（还）。这是我最近的尝试：

设置：

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" />
<script type="text/javascript">
function toggle() {
    var el = document.getElementById("style1");
    if (el.href == "resumecss.css") {
        el.href = "resumecssinvert.css";    
    }
    else {
        el.href = "resumecss.css";  
    }
}
</script>

调用：

<button type="button" onclick="toggle()">Switch</button>

目的是重复地在一页上的两个皮肤之间翻转。

在此先感谢各位热心/知识渊博的人提供帮助。

Answer 1

这个适用于 Jquery。

$('#dark-css').click(function() {

    var isDarkCss = $("link[href='dark.css']");

    if (isDarkCss.length){
        isDarkCss.remove();
    }else{
        $('head').append('<link type="text/css" rel="stylesheet" media="all" href="dark.css">');
    }
});

Answer 2

这是我能想到的最短的解决方案（可能适用于所有浏览器）：

function toggle() {
  var a = document.getElementById("style1");
  a.x = 'resumecssinvert' == a.x ? 'resumecss' : 'resumecssinvert'; // short if
  a.href = a.x + '.css';
}

由于 javascript 中的所有内容都是一个对象，因此您可以简单地添加属性。

假设你的默认css是“resumecss”

第一次x没有设置，返回false，所以会设置“resumecssinvert”。

第二次设置x并返回true并切换回来。一切正常。

Answer 3

您的脚本是可靠的，除了 href 属性是一个完整的 URL，即使您使用的是相对路径。这是我使用的有效代码：

function toggle() {
    var el = document.getElementById("style1");
    if (el.href.match("resumecss.css")) {
        el.href = "resumecssinvert.css";    
    }
    else {
        el.href = "resumecss.css";  
    }
}

在此处查看小提琴：http://jsfiddle.net/jakelauer/LWJjX/

Answer 4

尝试同时包含它们，然后切换禁用标志

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" />
<link id="style2" rel="stylesheet" type="text/css" href="resumecssinvert.css" disabled="disabled"/>
<script type="text/javascript">
function toggle() {
    var el1 = document.getElementById("style1"),
        el2 = document.getElementById("style2");
    if( el1.disabled == "disabled" ) {
        el1.disabled = undefined;
        el2.disabled = "disabled";
    } else {
        el1.disabled = "disabled";
        el2.disabled = undefined;
    }
}
</script>