2007-1
12
理智地、负责任地、透明地推广Firefox

如果要在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");

: http://www.awflasher.com/blog/archives/791

哇!跟我一样,您也是一名Firefox用户,这些话题您可能感兴趣:

RSS feed | Trackback URI

才 5 条评论 ( 展开所有评论 | 收起所有评论 ) 立刻发表评论 »

oolong
2007-01-12 16:21:48

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

wondger
2007-01-14 10:08:29

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

wondger
2007-01-14 10:18:56

搞定咯~···

hvion
2007-01-22 14:16:52

学习了,谢谢.

aw's blog 姿态永恒 » 个人整理的FF、IE的最基本的CSS兼容技巧
2007-03-11 00:43:31

[...] 补充: 当时发表这篇文章时,并没有IE7的出现,而且那个时候我也没有很多地考虑JavaScript。这次更新一些。 一、IE6的border。会自动往外加margin。 当第一个box和第二个box之间的margin为a时,如果两个box都没有border,那么IE6、IE7、FF下面都没问题。 当有border时,FF和IE7的border不会占用它们之间的“空位”,而IE6这个老喜欢“自作聪明”的家伙就把margin给撑开了。 我并没有调试是否padding也会有这个副作用,我个人怀疑也有,但是既然把问题分析道这一步了,就不赘述了。 解决方案就是判断是否是IE6,然后动态的修补margin。其间涉及到js获取浏览器版本、样式值这些技术。参阅 http://www.awflasher.com/blog/archives/791 [...]