0
こんにちは私は自分のウェブサイトでHTMLスタイルシートを変更するオプションを実装しました。しかし、私が修正や把握ができないようなわずかなバグがあります。スタイルシートを変更するオプションをクリックすると、バグが発生しているように見え、選択しません。別のオプションをクリックしてから、同じスタイルシートに戻ると、それは機能します。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]（https://jsfiddle.net/） – leigero
に入れてみるべきですが、それは試しても動作していないようです – DrExpresso