有没有办法让这个解决方案兼容IE6和IE7?
http://jsfiddle.net/kirkstrobeck/sDh7s/1/
来自 this question
我想我找到了一个真正的解决方案。我把它变成了一个新函数:
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 值的示例。我的问题是我已经在我的 CSS 中为宽度设置了 !important
以避免与其他主题 CSS 冲突,但是我在 jQuery 中对宽度所做的任何更改都不会受到影响,因为它们将被添加到样式属性。
兼容性
使用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;
}
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↓</a> \
<!--<a href="#" class="reset">A</a>--> \
<a href="#" class="increase">A↑</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 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9009294/