HTML样式表更改错误

时间:2017-05-02 20:25:47

标签: javascript html css

您好我在我的网站上实现了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>

1 个答案:

答案 0 :(得分:0)

你的脚本工作正常!没有错误!我尝试过.css这样的不同背景颜色

#Input date
five_to_date = ['09/01/2016']
def isDate(tag):
    if tag.name=='td':
        return bool(re.match('\d\d\/\d\d\/\d\d', tag.text))
    else:
        return False

#store in list
tds_three_five = three_five.find_all(isDate)
dates_three = [p.text for p in tds_three_five]
#target date
dates_three_cnv = [datetime.strptime(x, '%m/%d/%Y').date() for x in 
dates_three]

for i in range(1):
    _lst_all_threefive = []
    for j in dates_three_cnv:
        if j < five_to_date:
            _lst_all_threefive.append(j)
    three_five_to_calc = _lst_all_threefive[0] # we only want one date
#Perform calculation of input date minus target date.
delta = five_to_date - three_five_to_calc

也许你的CSS文件存在一些问题。你可以给我们你的CSS文件,然后我们将有所有项目进行控制。