jquery globalcss IE不透明

Question

我正在使用jquery globalcss插件來更改全局樣式表。它不處理不透明和IE。

我一直試圖讓它沒有運氣的工作。這是我試圖強制插件試圖理解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); 
} 

Blah。如果任何人都可以提供幫助，那會很棒。謝謝。

我在這裏粘貼的插件，因爲它是在原來的站點不再：

/* 
* 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

Answer 1

UPDATE：

我的第一個想法以下是沒問題的。事實證明問題更爲嚴重：確保在浮點數小於1之前添加零。也許這是由於javascript如何處理字符串值轉換爲數字？無論如何，在「.5」之前加一個零來解決問題。

// 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。順便說一句，你原來的演示頁面有一個javascript問題，大括號在錯誤的地方。我也解決了這個問題。

下面是什麼導致THIS--最初的想法竟然不成爲問題

可能是運行在IE的怪癖：在沒有做使用jQuery：爲了不透明度工作時，元素必須具有「layout」，這是由CSS觸發的特定於IE的布爾狀態，例如高度，寬度，縮放等。如果元素沒有「佈局」，則不透明將不起作用。

解決方法是將特定的CSS添加到該元素，以便爲其提供「佈局」。不知道這是發生在你的情況，但很容易通過添加一個提供佈局的CSS屬性並查看問題是否消失來檢查。

從http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/：

但是簡單地設置在IE中濾波器/不透明度 值是不夠的。變爲 ，即IE需要一個元素爲 才能使濾鏡/不透明度 有效。如果你的元素沒有 的位置，你可以通過 爲你的CSS添加'zoom：1'來解決這個問題。有 是其他黑客來處理這個， 縮放是我選擇的一個，它似乎 足夠好。

在JavaScript中，你可以發現，如果在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屬性，並且只在放大率爲假時才設置縮放，只要您針對hasLayout完全不存在的非IE情況進行辯護即可。

如果這樣不能解決問題，您可以發佈一個HTML示例或URL，以便我們可以重新制作問題，以便更容易地建議修復嗎？謝謝！