javascript – 这个解决方案可以兼容IE7和IE6吗？

有没有办法使这个解决方案IE6和IE7兼容？

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

我想我找到了一个真正的解决方案.我把它变成了一个新功能：

jQuery.style(name,value,priority);

您可以使用.style(‘name’)获取值,就像.css(‘name’),使用.style()获取CSsstyleDeclaration,并设置值 – 可以将优先级指定为’important’ .见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,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,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,priority);
        } else {
            // Get style property
            return style.getPropertyValue(styleName);
        }
    } else {
        // Get CSsstyleDeclaration
        return style;
    }
}

有关如何读取和设置CSS值的示例,请参见https://developer.mozilla.org/en/DOM/CSSStyleDeclaration.我的问题是我已经设置了！对我的CSS中的宽度很重要以避免与其他主题CSS发生冲突,但是我对jQuery中的宽度所做的任何更改都不会受到影响,因为它们会被添加到style属性中.

兼容性

为了使用setProperty函数进行优先级设置,http://help.dottoro.com/ljdpsdnb.php表示支持IE 9和所有其他浏览器.我已经尝试使用IE 8并且它已经失败了,这就是为什么我在我的函数中构建了对它的支持(参见上文).它将适用于使用setProperty的所有其他浏览器,但它需要我的自定义代码才能在< IE 9.

解决方法

这看起来不必要复杂..我只是使用基于em的字体大小的容器内的标签,并使用百分比调整容器的字体大小.这样,容器内的所有标签都会自动调整大小.

Jsfiddle：http://jsfiddle.net/qqxe9/

CSS：

.container {
font-size:100%; 
}

p {
font-size:1em; 
}

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保存部分时,请记住将初始data()设置为cookie中的值而不是100％,然后调用changeFontSize(0)来应用它.

无论如何,这段代码适用于IE6.

javascript – 这个解决方案可以兼容IE7和IE6吗？

解决方法

相关文章