2014-12-09 4 views
1

내 웹 사이트의 CSS 스타일 시트를 변경하여 배경색을 변경할 수 있습니다. 버튼과 함께 작동하지만 드롭 다운 목록에 넣으려고하면 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> 
+0

내가 원하는 결과를 제공하지 않는다는 것을 의미하는 대신 드롭 다운 옵션 중 하나를 클릭하면 방금 그대로 유지됩니다. – Kyle

+0

드롭 다운 상자를 자바 스크립트 코드와 연결하는 위치가 표시되지 않습니다. 코드 예제가 완전하지 않은 것 같습니다. – eckig

+0

설명을 변경했습니다. 불편을 끼쳐 드려 죄송합니다. – Kyle

답변

0

option 태그는 브라우저의 숫자에 onclick 이벤트를 수락하지 않습니다 http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html

대안은 selectonchange 이벤트에 연결하는 것입니다 :

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>

관련 문제