HTML 样式表更改错误答案

【问题标题】：HTML Stylesheet changing bugHTML 样式表更改错误
【发布时间】：2017-05-02 20:25:46
【问题描述】：

您好，我在我的网站上实现了一个 HTML 样式表更改选项。但是，有一个我似乎无法修复或弄清楚的小错误。当我单击更改样式表的选项时，它似乎出现错误并且不会选择它。如果我单击不同的选项，然后单击返回到相同的样式表，它就可以工作。

有人知道为什么会这样吗？任何帮助，将不胜感激。

function setActiveStyle(styletitle) {
  var stylelist = document.getElementsByTagName("link");
  for (i = 0; i < stylelist.length; i++) {
    if (isOptionalStylesheet(stylelist[i])) {
      activateWhenMatching(stylelist[i], styletitle);
    }
  }
}

function isOptionalStylesheet(thislink) {
  return (thislink.getAttribute("rel").indexOf("style") != -1) &&
    thislink.getAttribute("title")
}

function activateWhenMatching(thislink, styletitle) {
  if (thislink.getAttribute("title") == styletitle) {
    thislink.disabled = false;
  } else {
    thislink.disabled = true;
  }
}

function chooseStyleBySize() {
  var theWidth = document.documentElement.clientWidth;
  if (theWidth < 800) {
    theSheet = "smallsheet";
  } else if (theWidth < 900) {
    theSheet = "mediumsheet";
  } else {
    theSheet = "bigsheet";
  }
  setActiveStyle(theSheet);
}

<head>
  <link rel="stylesheet" type="text/css" href="css/screen.css" title="bigsheet" />
  <link rel="alternate stylesheet" type="text/css" href="css/alternativeCSS2.css" title="mediumsheet" />
  <link rel="alternate stylesheet" type="text/css" href="css/alternativeCSS3.css" title="smallsheet" />
  <link rel="alternate stylesheet" type="text/css" href="css/alternativeCSS4.css" title="specialsheet" />
</head>

<body onload="chooseStyleBySize()">
  <div id="layout">
    <div id="swapping">
      <p>
        <select onchange="setActiveStyle(this.value)">
                  <option value="bigsheet">For big pages</option>
                  <option value="mediumsheet">For medium-sized pages</option>
                  <option value="smallsheet">For small pages</option>
                  <option value="specialsheet">For special pages</option>
               </select>

【问题讨论】：

您应该尝试将其放入JSFiddle
试过了，好像不行，谢谢回复

标签： javascript html css

【解决方案1】：

您的脚本运行正常！没有错误！我尝试过像这样使用 .css 不同的背景颜色

body {
    background: red;
}

也许您的 CSS 文件存在一些问题。您可以将您的 CSS 文件提供给我们，然后我们将控制所有项目。

【讨论】：