jquery globalcss IE Opazität

Question

Ich bin mit einem Jquery globalcss Plugin globale Stylesheets zu ändern. Dabei spielt es keine handhaben Opazität und IE.

Ich habe versucht, es zu bekommen, ohne Glück zu arbeiten. Hier ist mein Versuch, das Plugin zu zwingen zu versuchen IE Stil Undurchsichtigkeit zu verstehen.

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. Wenn jemand helfen kann, wäre das großartig. Danke.

Ich bin einfügen Plugin hier, weil es nicht mehr auf seinem ursprünglichen Standort:

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

Edit: Ich habe eine jsbin Live-Demo. Bitte vergleichen in verschiedenen Browsern. http://jsbin.com/iqadu/edit

Answer 1

UPDATE:

Meine erste Idee war unten nicht das Problem. Es stellte sich heraus das Problem viel mehr Fußgänger ist: Achten Sie auf eine Null vor Gleitkommazahlen an, weniger als 1 Vielleicht ist dies darauf zurückzuführen, wie Javascript, übernimmt die Konvertierung von String-Werte in Zahlen? Unabhängig davon, eine Zugabe von Null vor“0,5" das Problem behoben.

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

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

Hier finden Sie aktuelle Code arbeiten hier: http://jsbin.com/ikore3 . BTW, Ihre ursprüngliche Demo-Seite hatte ein Javascript-Problem mit Klammern an der falschen Stelle. Ich reparierte das auch.

ist unten ursprüngliche Idee für WAS THIS-- verursache erwies sich als nicht das Problem sein

Sie können in eine Marotte von IE ausgeführt werden, die nichts mit Jquery zu tun hat: für Opazität, um Arbeit, Elemente müssen „ Layout ", die ein IE-spezifischer Boolesche Zustand ist, die durch CSS wie Höhe, Breite, Zoom, etc. Wenn ein Element ausgelöst wird, nicht „Layout“ hat dann Opazität wird nicht funktionieren.

Die Abhilfe ist insbesondere CSS an das Element zu geben, um es zu geben, „Layout“. Nicht sicher, ob dies ist, was in Ihrem Fall passiert, aber es ist einfach genug, um zu überprüfen, indem Sie eine der Layout-Bereitstellung von CSS-Attribute hinzufügen und sehen, ob das Problem verschwindet.

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

  

Aber einfach die Filter / Opazität einstellen   Wert in IE ist nicht genug. Es stellte sich heraus   dass ein Element IE erfordert zu sein   Um Filter / Opazität positioniert   arbeiten. Wenn Ihr Element nicht über   eine Position, die Sie dieses Problem umgehen können, indem   zu Ihrem CSS: ‚1-Zoom‘ hinzuzufügen. Dort   sind andere Hacks damit umgehen,   Zoom war diejenige, die ich nahm, und es scheint   arbeitet gut genug.

     

In JavaScript können Sie herausfinden, ob ein   Element in IE weist eine Positionskomponente   durch Prüfen   element.currentStyle.hasLayout. Wenn   hasLayout falsch ist dann das Element,   keine CSS-Positionierung hat.

     

Wenn Sie mehr über dieses Thema erfahren hier eine Leseliste Ihr begonnen zu erhalten:

     

◦ Explo OpacityStep-by-Step [defekter Link]

     

Auf Layout mit

     

Opazität @ Quirksmode

Verwenden Sie den Code, hier ist ein möglicher Weg, um sicherzustellen, wie zu testen, ob dies Ihr Problem ist oder nicht:

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);
}

Kompliziertere Versionen von diesem würde überprüfen, um zu sehen, ob Zoom bereits vorhanden war und es nur hinzufügen, wenn es fehlt. Sie könnten auch die hasLayout Immobilien und nur stellen Sie den Zoom wenn es falsch war, so lange wie Sie gegen die nicht-IE Fall verteidigen, wo hasLayout es nicht sein wird.

Wenn dies das Problem nicht beheben, können Sie eine HTML-Probe oder URL veröffentlichen, damit wir das Problem repro, die es einfacher machen, wird ein Update vorschlagen? Dank!