jquery globalcss непрозрачность IE

Я использую плагин 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


person Jourkey    schedule 03.11.2009    source источник
comment
Каково значение elemntid.style.filter в IE6/7 после того, как вы это сделаете? Где elementid — это идентификатор элемента, с которым вы его тестировали.   -  person Kevin Peno    schedule 05.11.2009
comment
Кроме того, попробуйте настроить фильтр вручную с помощью elementid.style.filter и опубликуйте результаты.   -  person Kevin Peno    schedule 05.11.2009


Ответы (1)


ОБНОВЛЕНИЕ:

Моя первая идея ниже не была проблемой. Оказывается, проблема гораздо более проста: не забудьте добавить ноль перед числами с плавающей запятой меньше 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 с фигурными скобками в неправильном месте. Я и это исправил.

НИЖЕ ПРЕДСТАВЛЕНА ПЕРВОНАЧАЛЬНАЯ ИДЕЯ ПРИЧИНЫ ЭТОЙ ПРИЧИНЫ — ПРОБЛЕМЫ ОКАЗАЛОСЬ НЕ БЫТЬ

Возможно, вы столкнулись с причудой IE, которая не имеет ничего общего с jquery: чтобы непрозрачность работала, элементы должны иметь "layout", которое представляет собой логическое состояние, специфичное для IE, которое запускается CSS, например высота, ширина, масштаб и т. д. Если элемент не имеет «макет», тогда непрозрачность не будет работать.

Обходной путь состоит в том, чтобы добавить определенный CSS к элементу, чтобы придать ему «макет». Не уверен, что это то, что происходит в вашем случае, но это достаточно легко проверить, добавив один из атрибутов CSS, обеспечивающих макет, и посмотреть, исчезнет ли проблема.

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

Но просто установить значение фильтра/непрозрачности в IE недостаточно. Оказывается, IE требует, чтобы элемент был позиционирован, чтобы работал фильтр/непрозрачность. Если у вашего элемента нет позиции, вы можете обойти это, добавив «zoom: 1» в свой CSS. Есть и другие лайфхаки, чтобы справиться с этим, я выбрал зум, и, похоже, он работает достаточно хорошо.

В JavaScript вы можете узнать, имеет ли элемент в IE компонент положения, проверив element.currentStyle.hasLayout. Если 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 и только установите масштабирование, если оно было ложным, если вы защищаете от случая, отличного от IE, где hasLayout вообще не будет.

Если это не решит проблему, не могли бы вы опубликовать образец HTML или URL-адрес, чтобы мы могли воспроизвести проблему, что облегчит предложение решения? Спасибо!

person Justin Grant    schedule 05.11.2009
comment
Ага, спасибо за помощь. Я создал живую демонстрацию на jsbin: jsbin.com/iqadu/edit. - person Jourkey; 05.11.2009
comment
круто - демо прояснило ситуацию, оказывается, проблема была довольно проста: использование 0,5 вместо 0,5 для числа! См. исправленный ответ выше. И спасибо за щедрость! :-) - person Justin Grant; 06.11.2009