代码之家  ›  专栏  ›  技术社区  ›  Jourkey

jquery globalcs ie不透明度

  •  2
  • Jourkey  · 技术社区  · 15 年前

    我正在使用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

    1 回复  |  直到 15 年前
        1
  •  2
  •   Justin Grant    15 年前

    更新:

    我下面的第一个想法不是问题。结果发现问题更为简单:确保在浮点数小于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问题,大括号在错误的位置。我也修过了。

    下面是导致这个问题的最初想法——结果不是问题所在。

    你可能会遇到一个与jquery无关的IE怪癖:为了不透明度工作,元素必须 layout 这是一个IE特定的布尔状态,由CSS触发,例如高度、宽度、缩放等。如果元素没有“布局”,则不透明度将不起作用。

    解决方法是向元素添加特定的CSS,以便为其提供“布局”。不确定这是否是您案例中发生的事情,但通过添加一个提供CSS属性的布局并查看问题是否消失,可以很容易地进行检查。

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

    但只需设置过滤器/不透明度 IE中的值不够。转出 IE需要一个元素 为了过滤/不透明而定位 工作。如果你的元素没有 你可以在这个职位上工作 在CSS中添加_缩放:1__。那里 还有其他黑客来处理这件事吗? 变焦是我选的,看起来 工作得足够好。

    在javascript中,您可以发现 IE中的元素有一个位置组件 通过检查 element.currentStyle.hasLayout。如果 hasLayout为false,则元素 没有CSS定位。

    如果您想了解更多有关此问题的信息,请阅读以下阅读列表:

    逐步探索不透明[断开链接]

    艾斯 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吗,这样我们就可以重新设置问题,从而更容易建议解决方案?谢谢!