HTML样式表更改错误 [英] HTML Stylesheet changing bug
问题描述
你好，我在我的网站上实现了HTML样式表更改选项。但是，有一个小小的错误，我似乎无法解决或弄清楚。当我点击一个选项来更改样式表时，它似乎会出错，并且不会选择它。如果我点击不同的选项，然后点击返回到相同的样式表。
任何人都知道为什么会发生这种情况？任何帮助，将不胜感激。
function setActiveStyle（styletitle）{var stylelist = document.getElementsByTagName（link ）; for（i = 0; i< stylelist.length; i ++）{if（isOptionalStylesheet（stylelist [i]））{activateWhenMatching（stylelist [i]，styletitle）; }}}函数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; }
< head> < link rel =stylesheettype =text / csshref =css / screen.csstitle =bigsheet/> < link rel =alternate stylesheettype =text / csshref =css / alternativeCSS2.csstitle =mediumsheet/> < link rel =alternate stylesheettype =text / csshref =css / alternativeCSS3.csstitle =smallsheet/> < link rel =alternate stylesheettype =text / csshref =css / alternativeCSS4.csstitle =specialsheet/>< / head>< body onload =chooseStyleBySize（）> < div id =layout> < div id =swapping> < p为H. < select onchange =setActiveStyle（this.value）> < option value =bigsheet>对于大页面< / option> < option value =mediumsheet>对于中型页面< / option> < option value =smallsheet>对于小页面< / option> < option value =specialsheet>对于特殊页面< / option> < / select>
<你的脚本工作正常！没有错误！我曾尝试使用.css不同的背景颜色，例如：
body {
background：red;
}
也许您的CSS文件存在一些问题。你可以给我们你的CSS文件，然后我们将所有的项目控制。
Hello I implemented a HTML stylesheet changing option on my website. However , there is a slight bug which I cannot seem to fix or figure out. When I click on a option to change the stylesheet it seems to bug out and it will not select it. If I click on a different option and then click back onto the same stylesheet it works.
Anyone know why this is happening? Any help would be appreciated.
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>
Your script is working correct! There is no bug! I have tried with .css different background color like this
body {
background: red;
}
Maybe your CSS files have some problems. You can give us your CSS files and then we will have all project for control.
这篇关于HTML样式表更改错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
