2009-11-03 2 views
2

전역 스타일 시트를 변경하려면 jquery globalcss 플러그인을 사용하고 있습니다. 불투명도와 IE는 처리하지 않습니다.jquery globalcss IE opacity

나는 운이 좋게 작동하도록 노력해 왔습니다. 다음은 플러그인이 IE 스타일의 불투명도를 이해하도록하려는 시도입니다.

function changeCss (property, value, target) { 
    if (property === "opacity") { 
     $(target).globalcss("filter","alpha(opacity="+value*100+")"); 
     /* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */ 
     $(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\""); 

    } 
    $(target).globalcss(property,value); 
} 

어쩌구. 누구든지 도울 수 있다면, 좋을 것입니다. 감사.

/* 
* Global Stylesheet jQuery Plugin 
* Version: 0.1 
* 
* Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS. 
* 
* Copyright (c) 2009 Jeremy Shipman (http://www.burnbright.co.nz) 
* 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
* INSTRUCTIONS: 
* use in the same way as the jQuery css function. Eg: 
* $("some selector").globalcss("style","value"); 
* 
* use the globalsetylesheet.print() function to return a string of the global stylesheet 
*/ 
(function($) { 

    //global singleton class for 
    globalstylesheet = new function globalStylesheet(){ 
     if(!document.styleSheets){ 
      alert("document.Stylesheets not found"); 
      return false; 
     } 

     var sheet = null; 
     var setrules = Array(); // rule cache 

     //set up a dummy noded 
     var cssNode = document.createElement('style'); 
     cssNode.type = 'text/css'; 
     cssNode.rel = 'stylesheet'; 
     cssNode.media = 'screen'; 
     cssNode.title = 'globalStyleSheet'; 
     document.getElementsByTagName("head")[0].appendChild(cssNode); 

     //find the newly created stylesheet and store reference 
     for(var i = 0; i < document.styleSheets.length; i++){ 
      if(document.styleSheets[i].title == "globalStyleSheet"){ 
       sheet = document.styleSheets[i]; 
      } 
     } 

     //set a CSS rule 
     this.setRule = function setRule(selector,ruleText){ 
      if(setrules[selector] != undefined){ 
       return setrules[selector]; 
      }else{ 
       if(sheet.addRule){ // IE 
        sheet.addRule(selector,ruleText,0); 
       }else{ 
        sheet.insertRule(selector+'{'+ruleText+'}',0); 
       } 
       setrules[selector] = this.getRule(selector); 
      } 
      return setrules[selector]; 
     } 

     //get a saved CSS rule 
     this.getRule = function getRule(selector){ 
      if(setrules[selector] != undefined){ 
       return setrules[selector]; 
      }else{ 
       var rules = allRules(); 
       for(var i = 0; i < rules.length; i++){ 
        if(rules[i].selectorText == selector){ 
         return rules[i]; 
        } 
       } 
      } 
      return false; 
     } 

     //helper function to get all rules 
     function allRules(){ 
      if(sheet.cssRules){ //IE 
       return sheet.cssRules; 
      }else{ 
       return sheet.rules; 
      } 
     } 

     //print out the stylesheet 
     this.print = function print(){ 
      var styleinfo = ""; 
      var rules = allRules(); 
      for(var i = 0; i < rules.length; i++){ 
       styleinfo+= rules[i].cssText+"\n" 
      } 
      return styleinfo; 
     } 

     //use jQuery's css selector function to set the style object 
     this.css = function css(jquery,key,value){ 
      rule = this.setRule(jquery.selector,key+":"+value+";"); 
      jQuery(rule).css(key,value); 
     } 
    } 

    //hook new function into jQuery 
    jQuery.fn.extend({ 
     globalcss : function globalcss(key,value){ 
      globalstylesheet.css(this,key,value); 
     } 
    }); 

})(jQuery); 

편집 : 더 이상 원래의 사이트이기 때문에

나는 여기에 플러그인을 붙여없는거야 내가 jsbin 라이브 데모를 만들었습니다. 다른 브라우저에서 비교해보십시오. http://jsbin.com/iqadu/edit

+0

이것을 수행 한 후에 IE6/7에서'elemntid.style.filter'의 값은 무엇입니까? 여기서'elementid'는 당신이 테스트 한 요소의 id입니다. –

+0

또한 'elementid.style.filter'를 사용하여 수동으로 필터를 설정하고 결과를 게시하십시오. –

답변

2

는 UPDATE : 아래

내 첫번째 생각은 문제가 아니었다. 문제는 보행자가 훨씬 더 많다는 것을 알았습니다. 1보다 작은 부동 소수점 앞에 0을 추가해야합니다. 아마도 이것은 자바 스크립트가 문자열 값을 숫자로 변환하는 방식 때문일 수 있습니다. 어쨌든 ".5"앞에 0을 추가하면 문제가 해결됩니다.

// works 
    var property = "opacity"; 
    var value = "0.5"; 
    var target = ".transparency"; 

    // doesn't work 
    var property = "opacity"; 
    var value = ".5"; 
    var target = ".transparency"; 

여기서 작업 코드를 확인하십시오 : http://jsbin.com/ikore3. BTW, 원래 데모 페이지에 잘못된 위치에 중괄호가있는 자바 스크립트 문제가있었습니다. 나는 그것을 고쳤다. 순서 불투명도에 : 아래

는이 항아리의 원인이 무엇인지에 대한 원래의 아이디어입니다 문제

당신이 JQuery와 함께 할 수 없다 IE의 특질에 실행 할 수있다

되지 밝혀졌다 요소의 높이, 너비, 확대/축소 등과 같은 CSS에 의해 트리거되는 IE 관련 부울 상태 인 "layout"이 있어야합니다. 요소에 "레이아웃"이 없으면 불투명도가 작동하지 않습니다.

해결 방법은 특정 CSS를 요소에 추가하여 "레이아웃"을 부여하는 것입니다. 이것이 당신의 경우에 어떤 일이 일어나는지 확실하지 않지만, 레이아웃 제공 CSS 속성 중 하나를 추가하고 문제가 사라지는지 확인하는 것만으로도 충분히 쉽습니다. http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/에서

:

그러나 단순히 IE에서 필터/불투명도 값이 충분하지 않다 설정. 필터/불투명도 이 작동하려면 IE에서 요소가 이어야합니다. 을 끄집어냅니다. 요소에 위치가 없으면 에 의해이 문제를 해결할 수 있습니다. CSS에 'zoom : 1'을 추가하십시오. 거기에 이 처리하는 다른 해킹, 줌 내가 골랐어 그리고 그것은 충분히 잘 작동 것 같습니다. IE의 요소가 element.currentStyle.hasLayout을 확인하여 위치 구성 요소 이있는 경우

자바 스크립트에서 당신은 알 수 있습니다. hasLayout가 false 인 경우 요소에는 CSS 위치 지정이 없습니다.

여기에이 문제에 대한 자세한 내용을 원한다면 얻을 수있는 독서 목록 당신의 시작 :

◦이 [깨진 링크] OpacityStep 별 단계를 탐색

On having layout

Opacity @ QuirksMode

코드를 사용하여 이것이 문제인지 아닌지 테스트하는 방법 중 하나는 다음과 같습니다.

function changeCss (property, value, target) { 
    if (property === "opacity") { 
     $(target).globalcss("filter","alpha(opacity="+value*100+")"); 
     /* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */ 
     $(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\""); 

     $(target).globalcss("zoom","1"); // ensure the target has layout 
    } 
    $(target).globalcss(property,value); 
} 

더 정교한 버전은 확대/축소가 이미 있는지 확인하고 누락 된 경우에만 추가합니다. 또한 hasLayout 속성을 검사하고 false 일 경우에만 줌을 설정합니다. hasLayout이없는 IE가 아닌 경우를 방어해야합니다.

그래도 문제가 해결되지 않으면 수정 프로그램 제안을 쉽게하기 위해 문제를 재현 할 수 있도록 HTML 샘플이나 URL을 게시 할 수 있습니까? 감사!

+0

네, 도와 줘서 고마워. jsbin에서 라이브 데모를 만들었습니다. http://jsbin.com/iqadu/edit – Jourkey

+0

데모로 훨씬 더 명확한 데모를 만들었습니다. 문제는 좀 간단했습니다. "0.5"대신 "0.5"를 사용했습니다. 번호! 위의 수정 된 답변을 참조하십시오. 그리고 현상금에 감사드립니다! :-) –