2

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

废话。如果有人可以提供帮助，那就太好了。谢谢。

我将插件粘贴在这里，因为它不再位于其原始站点上：

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

4

1 回答 1

2

更新：

我下面的第一个想法不是问题。事实证明这个问题更加简单：确保在小于 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 怪癖：为了使不透明度起作用，元素必须具有“布局”，这是由 CSS 触发的特定于 IE 的布尔状态，例如高度、宽度、缩放等。如果元素没有“布局”，则不透明度将不起作用。

解决方法是向元素添加特定的 CSS 以便为其提供“布局”。不确定这是否是您的情况，但是通过添加提供布局的 CSS 属性之一并查看问题是否消失来检查很容易。

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

但仅在 IE 中设置过滤器/不透明度值是不够的。事实证明，IE 需要定位一个元素才能使过滤器/不透明度起作用。如果您的元素没有位置，您可以通过在 CSS 中添加“缩放：1”来解决此问题。还有其他技巧可以解决这个问题，zoom 是我选择的，它似乎运行良好。

在 JavaScript 中，您可以通过检查 element.currentStyle.hasLayout 来了解 IE 中的元素是否具有位置组件。如果 hasLayout 为 false，则该元素没有 CSS 定位。

如果您想了解有关此问题的更多信息，这里有一个阅读列表，可以帮助您入门：

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

◦关于布局

◦不透明度@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，以便我们可以重现问题，从而更容易提出修复建议？谢谢！

于 2009-11-05T17:34:24.693 回答