尝试通过javascript启用和禁用CSS文件

Question

我有 2 个不同的 css 文件，我想动态使用它们。我有一个移动预览按钮，它将更改为另一个 css 文件，并将相同的按钮文本更改为桌面预览，并且我希望 css 更改为原始文件。我只能在按移动预览时更改为第二个文件，但在按同一按钮后，我收到错误“TypeError：无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型。”

这是我的代码：

mobileBtn.addEventListener('click', () => {
    const mobileLink = document.createElement('link');
    mobileLink.rel = 'stylesheet';
    mobileLink.type = 'text/css';
    mobileLink.href = 'styles-no-media-query.css'
    document.head.appendChild(mobileLink);

    const currentStyleSheet = document.querySelector('link[href="styles2.css"]');
    const alternativeStyleSheet = document.querySelector('link[href="styles-no-media-query.css"]');

    if (currentStyleSheet) {
      currentStyleSheet.remove();
      document.head.appendChild(alternativeStyleSheet);
      btnText.textContent = 'Desktop Preview';
    } else {
      alternativeStyleSheet.remove();
      document.head.appendChild(currentStyleSheet);
      btnText.textContent = 'Mobile Preview';
    }
});

按下按钮后，currentStyleSheet 返回 null，无法弄清楚原因。尝试制作与 mobileLink 相同的桌面链接，但没有成功。

希望能在这里得到一些帮助。谢谢！

Answer 1

如果您尝试在点击处理程序中动态添加元素，我建议您尝试另一种方法。

只需 1 个元素并在点击处理程序中更改其属性（主要是 href 属性，但其他您可能还需要更改其他属性）。

使用

id='my-link-el'

在文档中添加链接元素。

然后您将能够获取它，只需检查并更改其 href 属性（只要您定义了

btnTxt

变量并保存 HTMLElement，该示例就应该有效）：

mobileBtn.addEventListener('click', () => {
  const linkEl = document.querySelector('#my-link-el');
  const currentStyleSheetHref = 'styles2.css';
  const alternativeStyleSheetHref = 'styles-no-media-query.css';

  if (linkEl.href.endsWith(currentStyleSheetHref)) {
    linkEl.href = alternativeStyleSheetHref;
    btnText.textContent = 'Desktop Preview';
  } else {
    linkEl.href = currentStyleSheetHref;
    btnText.textContent = 'Mobile Preview';
  }
});