Javascript 此解决方案是否与IE7和IE6兼容？

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

---

从 我想我找到了一个真正的解决办法。我已将其转换为一个新函数：

jQuery.style（名称、值、优先级）

您可以使用它通过
.style（'name'）
获取值，就像
.css（'name'）
一样，使用
.style（）
获取CSSStyleDeclaration，还可以设置值，并能够将优先级指定为“重要”。看

演示
以下是输出：

null
red
blue
important

功能
//对于那些需要它们的人（

有关如何读取和设置CSS值的示例，请参见。我的问题是我已经设置了
！重要信息
，我的CSS中的宽度可以避免与其他主题CSS冲突，但是我在jQuery中对宽度所做的任何更改都不会受到影响，因为它们会添加到样式属性中

兼容性
对于使用
setProperty
函数设置优先级，表示支持IE9+和所有其他浏览器。我尝试过IE 8，但失败了，这就是为什么我在我的函数中建立了对它的支持（见上文）。它可以在使用setProperty的所有其他浏览器上工作，但需要我的自定义代码才能在中工作，这看起来不必要的复杂。。我只会对容器内的标记使用基于em的字体大小，并使用百分比调整容器的字体大小。这样，容器中的所有标记都会自动调整大小

JsFiddle：

CSS:

JS

函数changeFontSize（n）
{
变量大小=$（'.container'）。数据（'size'）；
尺寸+=n*10；
$（'.container'）.css（'font-size'，size+'%'））.data（'size'，size）；
}
$（文档）.ready（函数（）{
$（'body'）。前置（'body'）\
             \
                 \
                 \
                 \
                 \
             \
.find（'>.container'）.data（'size'，100）；
        
        
$（'.font size changer.increase'）。单击(
函数（）
            {
改变大小（1）
            }
        );
        
$（'.font size changer.reduce'）。单击(
函数（）
            {
更改字体大小（-1）
            }
        );
});

我已经去掉了保存到cookie的部分，但这很容易重新应用

其中一个技巧是将初始百分比保存在某个地方（我使用了data（）），因为如果您尝试使用.css（“font-size”）检索它，它将为您提供计算的大小（例如“16px”）。
可能有一种方法可以获取百分比值，但不记得如何获取

重新应用cookie保存部分时，请记住将初始数据（）设置为cookie中的值，而不是100%，然后调用changeFontSize（0）应用它

无论如何，这段代码在IE6中可以工作。
您将无法在IE6或IE7中正常工作。我建议改为创建新的样式规则，其中可以包括
！重要的
声明，可以在所有主要浏览器中使用以下函数实现。它将要求您的元素通过选择器（例如ID选择器）进行识别（如果不存在，则需要向元素添加ID），并且只创建样式规则，而不是检索它们，尽管这对于您的示例来说很好

我已经更新了您的示例，它现在可以在所有主要浏览器中使用，包括IE 6和IE 7：

样式规则创建代码：

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

去

将您的Javascript粘贴到那里

你会看到有很多警告。首先，修复所有警告。一旦JavaScript Lint不再生成警告，请在IE中测试它。这至少会让您开始寻找解决方案。
请停止支持IE6！别再抱怨IE6了，我们已经
.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);  
            }
        );
});

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