在下拉列表中更改css单击

时间:2014-12-09 11:07:52

标签: javascript html css asp.net

我正在尝试更改网站上的CSS样式表,以便可以更改背景颜色。 它适用于按钮,但当我试图将它放在下拉列表中时,它不会应用css表开关。

任何人都可以帮助我吗?

  <script type="text/javascript">

  var style_cookie_name = "style";
  var style_cookie_duration = 30;



  function switch_style(css_title) {

      var i, link_tag;
      for (i = 0, link_tag = document.getElementsByTagName("link");
i < link_tag.length; i++) {
          if ((link_tag[i].rel.indexOf("stylesheet") != -1) &&
  link_tag[i].title) {
              link_tag[i].disabled = true;
              if (link_tag[i].title == css_title) {
                  link_tag[i].disabled = false;
              }
          }
          set_cookie(style_cookie_name, css_title,
  style_cookie_duration);
      }
  }
  function set_style_from_cookie() {
      var css_title = get_cookie(style_cookie_name);
      if (css_title.length) {
          switch_style(css_title);
      }
  }
  function set_cookie(cookie_name, cookie_value,
lifespan_in_days, valid_domain) {

      var domain_string = valid_domain ?
                   ("; domain=" + valid_domain) : '';
      document.cookie = cookie_name +
                   "=" + encodeURIComponent(cookie_value) +
                   "; max-age=" + 60 * 60 *
                   24 * lifespan_in_days +
                   "; path=/" + domain_string;
  }
  function get_cookie(cookie_name) {

      var cookie_string = document.cookie;
      if (cookie_string.length != 0) {
          var cookie_value = cookie_string.match(
                    '(^|;)[\s]*' +
                    cookie_name +
                    '=([^;]*)');
          return decodeURIComponent(cookie_value[2]);
      }
      return '';
  }

<select>
                <option value="submit" onclick="switch_style('Site');return false;" id="Site"/>Thema 1</option>
                <option value="submit" onclick="switch_style('Site2');return false;" id="Site2"/>Thema 2</option>

                </select>

1 个答案:

答案 0 :(得分:0)

option代码不接受多种浏览器中的onclick事件:http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html

另一种方法是将onchange事件附加到select

function switch_style(theme) {
  alert(theme);
}
<select onchange="switch_style(this.value)">
  <option value="Thema 1">Thema 1</option>
  <option value="Thema 2">Thema 2</option>
</select>