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>

使用属性方法的更新示例:

const
  normalStyle   = document.getElementById('style1'),
  invertedStyle = document.getElementById('style2');

const toggle = (style1, style2) => {
  if (style1.hasAttribute('disabled')) {
    style1.removeAttribute('disabled');
    style2.setAttribute('disabled', '');
  } else {
    style1.setAttribute('disabled', '');
    style2.removeAttribute('disabled');
  }
}

toggle(normalStyle, invertedStyle); // Swap disabled flag

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" />
<link id="style2" rel="stylesheet" type="text/css" href="resumecssinvert.css" disabled />