Может ли это решение быть совместимым с IE7 и IE6? - PullRequest
Новая
       7

Может ли это решение быть совместимым с IE7 и IE6?

6 голосов
/ 25 января 2012

Есть ли способ сделать это решение совместимым с IE6 и IE7?

http://jsfiddle.net/kirkstrobeck/sDh7s/1/

Вытащено из этого вопроса

Я думаю, что нашел реальное решение.Я превратил ее в новую функцию:

jQuery.style(name, value, priority);

Вы можете использовать ее для получения значений с .style('name'), как .css('name'), для получения CSSStyleDeclaration с .style(),а также установить значения - с возможностью указать приоритет как «важный».См. https://developer.mozilla.org/en/DOM/CSSStyleDeclaration.

Демо 

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

Вот вывод: 

null
red
blue
important

Функция 

// For those who need them (< IE 9), add support for CSS functions
var isStyleFuncSupported = CSSStyleDeclaration.prototype.getPropertyValue != null;
if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
        return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
        this.setAttribute(styleName,value);
        var priority = typeof priority != 'undefined' ? priority : '';
        if (priority != '') {
            // Add priority manually
            var rule = new RegExp(RegExp.escape(styleName) + '\\s*:\\s*' + RegExp.escape(value) + '(\\s*;)?', 'gmi');
            this.cssText = this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
        } 
    }
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
        return this.removeAttribute(a);
    }
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
        var rule = new RegExp(RegExp.escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?', 'gmi');
        return rule.test(this.cssText) ? 'important' : '';
    }
}

// Escape regex chars with \
RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

// The style function
jQuery.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node 
    if (typeof node == 'undefined') {
        return;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
        if (typeof value != 'undefined') {
            // Set style property
            var priority = typeof priority != 'undefined' ? priority : '';
            style.setProperty(styleName, value, priority);
        } else {
            // Get style property
            return style.getPropertyValue(styleName);
        }
    } else {
        // Get CSSStyleDeclaration
        return style;
    }
}

См. https://developer.mozilla.org/en/DOM/CSSStyleDeclaration для примеров того, как читать и устанавливать значения CSS.Моя проблема заключалась в том, что я уже установил !important для ширины в своем CSS, чтобы избежать конфликтов с CSS другой темы, но на любые изменения, которые я внес в ширину в jQuery, это не повлияет, так как они будут добавлены в атрибут style.

Совместимость

Для установки с приоритетом с помощью функции setProperty, http://help.dottoro.com/ljdpsdnb.php говорит, что есть поддержка IE 9+ и всех других браузеров.Я пытался с IE 8, и он потерпел неудачу, поэтому я встроил поддержку для своих функций (см. Выше).Он будет работать во всех других браузерах, использующих setProperty, но для работы в

Ответы [ 3 ]

9 голосов
/ 28 января 2012

Это выглядит излишне сложно ... Я бы просто использовал размер шрифта на основе em для тегов внутри контейнера и отрегулировал размер шрифта контейнера с помощью процентов.Таким образом, все теги внутри контейнера автоматически меняются.

JsFiddle: http://jsfiddle.net/qqxe9/

CSS: 

.container {
 font-size:100%;   
}

p {
 font-size:1em;   
}

JS 

function changeFontSize(n)
{
    var size = $('.container').data('size');
    size += n * 10;
    $('.container').css('font-size',size+'%').data('size',size);
}


$(document).ready(function(){
        $('body').prepend(' \
            <div class="font-size-changer"> \
                <a href="#" class="decrease">A&darr;</a> \
                <!--<a href="#" class="reset">A</a>--> \
                <a href="#" class="increase">A&uarr;</a> \
                <a href="#" class="null">null</a> \
            </div> \
        ').find('> .container').data('size',100);
        
        
        $('.font-size-changer .increase').click(
            function() 
            {
                changeFontSize(1);  
            }
        );
        
        $('.font-size-changer .decrease').click(
            function() 
            {
                changeFontSize(-1);  
            }
        );
});

Я удалил сохранение в файл cookie, но это достаточно просто для повторного применения.

Один трюк - сохранить начальный процент где-то (я использовал data ()), потому что если вы попытаетесь получить его с помощью.css ('font-size') даст вам рассчитанный размер (например, 16px).Может быть способ получить значение в процентах, но я не могу вспомнить, как.

При повторном применении части, сохраняющей файлы cookie, не забудьте установить начальные данные () в значение вcookie вместо 100%, затем вызовите changeFontSize (0), чтобы применить его.

В любом случае, этот код работает в IE6.

4 голосов
/ 29 января 2012

Вы не сможете заставить это работать в IE 6 или 7, как есть.Вместо этого я бы предложил создать новые правила стиля, которые могут включать объявления !important и могут быть выполнены во всех основных браузерах с помощью чего-то вроде следующей функции.Это потребовало бы, чтобы ваши элементы были идентифицируемыми с помощью селектора, такого как селектор идентификаторов (что потребовало бы добавления идентификаторов к элементам, если они отсутствуют), и создавал бы только правила стиля вместо их извлечения, хотя это хорошо для вашего примера.1002 *

Я обновил ваш пример, и теперь он работает во всех основных браузерах, включая IE 6 и 7: http://jsfiddle.net/9ZZVP/1/

Код создания правила стиля: 

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
}

Примериспользование: 

createCssRule("#foo", "background-color: purple !important;");
0 голосов
/ 03 февраля 2012

Перейдите на http://www.javascriptlint.com/online_lint.php

Вставьте туда свой Javascript.

Вы увидите, что предупреждений довольно много.Для начала исправьте все предупреждения.Как только JavaScript Lint больше не генерирует предупреждения, протестируйте его в IE.Это должно, по крайней мере, привести вас к поиску решения.

...