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

Posted 2023-03-05

【中文标题】使用 Javascript 切换 CSS 表格（点击时）

【英文标题】：Toggle CSS Sheets (on click) with Javascript

【发布时间】：2013-08-24 11:13:55

【问题描述】：

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

设置：

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

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

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

【参考方案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">');
    
);

【参考方案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并切换回来。一切正常。

【讨论】：

唯一的工作一次，一旦我再次点击按钮，它就停止工作了。

【参考方案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/

【讨论】：

+1，但请下次从 html 中拆分 JavaScript：jsfiddle.net/LWJjX/3

【参考方案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>

【讨论】：

我不确定浏览器缓存是如何工作的，但是这个可能会带来更流畅的用户体验，因为它会在开始时一次性加载两个规则集。