使用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

尝试包括它们，然后切换禁用标志

<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>

Answer 2

您的脚本是稳定的，除了该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 3

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

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并返回。一切正常。