尝试通过 javascript 启用和禁用 css 文件-解网

问：

我有 2 个不同的 css 文件，我想动态地使用它们。我有一个移动预览按钮，它将更改为另一个 css 文件，并将相同的按钮文本更改为桌面预览，我希望 css 更改为原始文件。我只能在按下移动预览时更改为第二个文件，但是在按下相同的按钮后，我收到错误
"TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type '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';
    }
});

按下按钮后返回 null，无法弄清楚原因。试图与但不起作用。currentStyleSheetmobileLinkdesktopLink

在这里将不胜感激。谢谢！

javascript css dom 事件

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';
  }
});

上一个：使用 JavaScript 验证两个搜索框的输入

下一个：赋值后变量的值未更新

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

Trying to enable and disable css files through javascript

评论