Saturday, November 11, 2006

Firefox 的 JavaScript 问题两则

今天发现页面上新加上的左列 Tag 在 Firefox 上显示不正确,在细察之下,发现 Firefox 在 JavaScript / CSS 上和 IE 不同之处:

问题 1. 类似 obj.style.height = imgObj.height 的语句无效。

即将一个 image 对象的高度值赋给另一个对象,用来修改其样式高度,这样做无效。

分析

要理解这个问题,首先要纠正思想上的一个误区。以上这个操作,其实并非是通常编程概念上的将一个 int 值赋给另一个 int 变量。这个语句的操作,实际上是把 imageObj.height 当作一个字符串,作为 obj 这个对象 CSS 中 height 的属性。

之前的一篇帖子说过,Firefox 对 CSS 的理解非常严格,任何表示大小的值,数字后面必须跟上单位,除非是 0。也就是说,height: 20 对于 Firefox 来讲不具有任何意义,必须写成 height: 20px 才会被接受。所以,在 JavaScript 中,为了让对 CSS 的 height 值的设置有效,所赋给的字符串也同样必须是数量加上单位。

解决

以上语句,应该写成:
obj.style.height = imgObj.height + 'px';


问题 2. Firefox 不支持 obj.innerText 属性。

如果把 obj.innerText alert() 出来,显示的值是 undefined

分析

Firefox 支持 innerHTML 属性却不支持 innerText,这一点实在是蹊跷。很多人建议用 innerHTML 来代替需要用 innerText 的场合,但是这显然并不总是适用。我们有时候只是要取得一个 Tag 中的文字信息而不需要 HTML 的标记。

解决

良好的替代办法是用 obj.textContent,这个属性的作用和 innerText 是相同的,名称不同而已。不过为了兼容性,我们还是需要在程序中区分一下当前环境支持哪种。以下方法可以帮助我们区分:
if (document.all) {
obj.innerText = "myText";
}
else {
obj.textContent = "myText";
}

以前我们讲过,Firefox 不支持 document.all 这个 Collection,我们需要用 getElementById() 方法来替代,所以通过判断是否有 document.all,就能区分当前环境。

5 comments:

zx.Longinus said...

我想说的是:Firefox的dom模型是符合w3c标准的。现在的西方网站提供了良好的w3c标准支持,这是一个趋势,以后因尽量采用符合w3c标准的写法。

jim kill said...

louis vuitton handbags
burberry scarf
ray ban sunglasses outlet
michael kors
cheap uggs
cheap oakleys
abercrombie fitch
ugg boots
tory burch flats
lv outlet
tods outlet
michael kors handbags
michael kors outlet online
ghd flat iron
coach outlet
coach factory online
prada handbags
lebron 11
canada goose jacket
ray ban outlet
christian louboutin
chanel handbags
coach outlet
polo outlet
michael kors outlet online
ray ban canada
coach factory outlet
20150311huangqihang

Guo Guo said...

air max 90
bottega veneta outlet
nike air max uk
nike huarache
custom mlb jerseys
surpa sneakers
coach outlet
seattle seahawks jerseys
the north face uk
kansas city chiefs jerseys
nike outlet store
atlanta falcons jersey
chanel handbags
green bay packers jerseys
michael kors uk
los angeles clippers jerseys
burberry outlet
dallas cowboys jersey
nike running shoes
arizona cardinals jerseys
oakley sunglasses canada
the north face outlet
oakley sunglasses
real madrid jersey
cleveland cavaliers jersey
pittsburgh steelers jersey
north face jackets
soccer shoes
mizuno running
san francisco 49ers jerseys
dansko outlet
new orleans saints jerseys
new york jets jerseys
air jordan shoes
los angeles lakers jerseys
north face outlet
mulberry uk
hermes belt
stuart weitzman boots
washington redskins jerseys
wei20150610

mmjiaxin said...

herve leger dresses
louis vuitton handbags outlet
coach outlet store
ralph lauren outlet
ray-ban sunglasses
kobe bryants shoes
tiffany and co
karen millen uk
coach outlet online
phone cases
rolex uk
nike free 5
swarovski crystal
louis vuitton handbags outlet
ray ban sunglasses
cheap oakley sunglasses
michael kors canada
nba jerseys
mlb jerseys
michael kors handbags
mm1205

eric yao said...

Coach Outlet ED Hardy Outlet Coach Outlet Store Online Kate Spade Outlet Cheap Jordans Coach Purses Coach Outlet Kate Spade Outlet Toms Outlet Louis Vuitton