javascript - 使用 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并切换回来。一切正常。

Answer 4

这个适用于 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">');
    }
});