IE和FF的两种”姿态”

如果要在IE和FF下面开发设计Web应用,真是一件磨练人心智的事情。我不止一次的看到这句话“Of course, then, there’s one standard way and one Microsoft way.”
如同上一篇日志提到,这个世界没有真相一样,这个世界也没有标准。没有永远的标准,只有永远的bugs和hacks,至少现在,你无法否认这一点。OK,鞠躬尽瘁,无愧我心已经很难得,足矣。

曾经需要通过JavaScript动态获取元素样式,发现style属性只可写,并不可读。非常奇怪,后来由于js提供了offsetLeft、offsetWidth等属性,也就没有仔细研究。毕竟大多数情况下,获取基本layout数据足够。然而,更复杂的Web应用则不得不面对需要获得,或者批量获得一些其他的属性值,例如“font-size”等。于是开始查阅相关的问题。

由于FF和IE对DOM以及CSSStyle的各自不同的理解,解决这个问题过程之曲折不想过多描述,我只把自己的心得记录下来以飨读者。在FF、IE、Opera、Safari下同时兼容的做法步骤:
1、定义函数getStyle – 参考 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element

function getStyle(oElm, strCssRule){
var strValue = “”;
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, “”).getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}

用法:

//假设someElement是DOM中某对象的引用,那么通过以下方法可以获得该对象下的字体大小:
var getSize = getStyle(someElement, “font-size”);

2、注意,对于缩略式表达式,FF无法获取!例如“padding:4px”,在FF下面,只能按照标准返回”padding-left”。简言之

var getPadding = getStyle(someElement, “padding”);

是无效的,需要用

var getPadding = getStyle(someElement, “padding-left”);

Advertisements

9 thoughts on “IE和FF的两种”姿态”

  1. 我一直都关注你的Blog,学了很多东西,没有留过一次言,尤其看了2003年的那个动画,感触很多,我最近的一个朋友也遇到类似的事情,我给她看你的动画。嗯 就这么多。。。祝你新的一年交好运!
    我得博客地址说一下吧http://raino120.blog.sohu.com

  2. FF把IE的收藏夹导进来,每次FF收藏页面的时候都直接收藏到IE的收藏目录,但是怎么IE的文件夹中没有在FF中已经收藏过的页面,只在FF运行时的收藏项中能看到?FF的导出收藏只能导出bookmarks.html,不能像IE,Maxthon将整个收藏导出为文件夹?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s