这个解决方案能否与IE7和IE6兼容？ [英] Can this solution be IE7 and IE6 compatible?
问题描述
有没有办法使此解决方案与IE6和IE7兼容？
http://jsfiddle.net/kirkstrobeck/sDh7s/1/
从此问题
我认为我找到了一个真正的解决方案。我已经把它变成一个新的函数：
jQuery.style（name，value，priority）; / p>
您可以使用它来获取 .style（'name'）的值，就像 .css（'name'），使用 .style（）获取CSSStyleDeclaration，并设置值 - '重要'。请参见 https://developer.mozilla.org/en/DOM/CSSStyle声明。
演示
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
< h2>函数
//对于需要它们的用户（< IE 9），添加对CSS函数的支持
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'？优先 ： '';
if（priority！=''）{
//手动添加优先级
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'：'';
}
}
//使用\
转义正则表达式字符RegExp.escape = function（text）{
return text.replace（/ - [\] {}（）* +？。，\\ ^ $ |＃\s] / g，\\ $&）;
}
//样式函数
jQuery.fn.style = function（styleName，value，priority）{
// DOM node
var node = this.get（0）;
//确保我们有一个DOM节点
if（typeof node =='undefined'）{
return;
}
// CSSStyleDeclaration
var style = this.get（0）.style;
// Getter / Setter
if（typeof styleName！='undefined'）{
if（typeof value！='undefined'）{
//设置样式属性
var priority = typeof priority！='undefined'？优先 ： '';
style.setProperty（styleName，value，priority）;
} else {
//获取样式属性
return style.getPropertyValue（styleName）;
}
} else {
//获取CSSStyleDeclaration
返回样式;
}
}
请参阅 https://developer.mozilla.org/en/DOM/CSSStyleDeclaration ，以获取如何读取和设置CSS值的示例。我的问题是，我已经设置了！important 为我的CSS中的宽度，以避免与其他主题CSS冲突，但我对jQuery的宽度的任何更改将不受影响因为它们将被添加到样式属性。
兼容性
c $ c> setProperty 函数， http://help.dottoro.com/ljdpsdnb.php说有支持IE 9+和所有其他浏览器。我试过IE 8，它失败了，这就是为什么我在我的功能（见上面）支持它。它将在所有其他浏览器使用setProperty，但它将需要我的自定义代码工作在< IE 9。
这看起来不必要的复杂..我只是使用基于字体大小的容器内的标签，容器的字体大小使用百分比。这样，容器中的所有标签都会自动调整大小。
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> uarr;< / a> \
< / div> \
'）.find（'> .container'）。data（'size'，100）;
$（'。font-size-changer .increase'）。
function（）
{
changeFontSize（1）;
}
）;
$（'。font-size-changer。减少'）。click（
function（）
{
changeFontSize（-1）;
}
）;
}
我已经删除了保存到cookie部分，但这很容易重新申请..
一个窍门是保存初始百分比某处（我使用data（）），因为如果你尝试用.css（'font-size'）检索它，给你计算的大小（例如'16px'）。
可能有一种方法可以获取值作为百分比，但不记得如何。
当重新应用cookie保存部分时，请记住将初始数据（）设置为cookie中的值而不是100％，然后调用changeFontSize（0）将其应用。
此代码适用于IE6。
Is there any way to make this solution IE6 and IE7 compatible?
http://jsfiddle.net/kirkstrobeck/sDh7s/1/
Pulled from this question
I think I've found a real solution. I've made it into a new function:
jQuery.style(name, value, priority);
You can use it to get values with .style('name') just like .css('name'), get the CSSStyleDeclaration with .style(), and also set values - with the ability to specify the priority as 'important'. See https://developer.mozilla.org/en/DOM/CSSStyleDeclaration.
Demo
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'));
Here's the output:
null
red
blue
important
The Function
// 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;
}
}
See https://developer.mozilla.org/en/DOM/CSSStyleDeclaration for examples of how to read and set the CSS values. My issue was that I had already set !important for the width in my CSS to avoid conflicts with other theme CSS, but any changes I made to the width in jQuery would be unaffected since they would be added to the style attribute.
Compatibility
For setting with the priority using the setProperty function, http://help.dottoro.com/ljdpsdnb.php says there is support for IE 9+ and all other browsers. I have tried with IE 8 and it has failed, which is why I built support for it in my functions (see above). It will work on all other browsers using setProperty, but it will need my custom code to work in < IE 9.
That looks needlessly complicated.. I would just use em based font size for the tags inside the container and adjust the container's font size using percents. That way all the tag inside container get automatically resized..
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);
}
);
});
I've stripped the saving to cookie part but that's easy enough to re-apply..
The one trick is to save the initial percentage somewhere (i used data()) because if you try to retrieve it with .css('font-size') it'll give you the calculated size (e.g. '16px'). There might be a way to get the value as a percentage but can't remember how.
When re-applying the cookie saving part, remember to set the initial data() to the value in the cookie instead of 100%, then call changeFontSize(0) to apply it.
Anyway, this code works in IE6.
这篇关于这个解决方案能否与IE7和IE6兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
