正在加载...

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

还没找到您要的东西?Google试试看吧,
Google更注重原创、时效性好的文章:


本文相关评论: 才 9 条评论
  1. oolong 2007-01-12 04:21:48

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

  2. wondger 2007-01-14 10:08:29

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

  3. wondger 2007-01-14 10:18:56

    搞定咯~···

  4. hvion 2007-01-22 02:16:52

    学习了,谢谢.

  5. aw's blog 姿态永恒 » 个人整理的FF、IE的最基本的CSS兼容技巧 2007-03-11 12: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 […]

  6. CSS书写顺序建议及CSS HACK(FF&IE兼容) | 梦幻天坛 2009-12-22 02:28:58

    […] 一、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 […]

  7. IE6.0、IE7.0 与FireFox CSS兼容的解决方法 2010-02-03 08:04:39

    […] 参阅 http://www.awflasher.com/blog/archives/791 […]

  8. ddt » IE6.0、IE7.0 与FireFox CSS兼容的解决方法 2011-09-22 11:47:09
  9. 关于FF对js控制页内css样式的疑惑 - web前端 - 开发者第1128947个问答 2014-02-21 05:37:57

    […] [ 本帖最后由 ariex 于 2007-10-25 17:08 编辑 ] 回复: 看这篇文章:http://www.awflasher.com/blog/archives/791 […]

[支持Ctrl+Enter]为了我们大家和家人的安全,留言请慎重!
声明:
1、本站仅与见过面的个人博客交换链接,见此文
2、留言时的头像是Gravatar提供的服务。如果您有兴趣并且有闲暇时间,可以看看这里的介绍