document.body的一些用法以及js中的常见问题

document.body的一些用法以及js中的常见问题

网页可见区域宽：document.body.clientWidth;

网页可见区域高：document.body.clientHeight;

网页可见区域宽：document.body.offsetWidth(包括边线的宽);

网页可见区域高：document.body.offsetHeight(包括边线的宽);

网页正文全文宽：document.body.scrollWidth;

网页正文全文高：document.body.scrollHeight;

网页被卷去的高：document.body.scrollTop;

网页被卷去的左：document.body.scrollLeft;

网页正文部分上：window.screenTop;

网页正文部分左：window.screenLeft;

屏幕分辨率的高：window.screen.height;

屏幕分辨率的宽：window.screen.width;

屏幕可用工作区高度：window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight:获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置

event.clientX相对文档的水平座标

event.clientY相对文档的垂直座标

event.offsetX相对容器的水平坐标

event.offsetY相对容器的垂直坐标

document.documentElement.scrollTop垂直方向滚动的值

event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量

Postbymolongon2009-05-1911:57PM#1

要获取当前页面的滚动条纵坐标位置，用：

document.documentElement.scrollTop;

而不是：

document.body.scrollTop;

documentElement对应的是html标签，而body对应的是body标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;

如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。

ie5.5之后已经不支持document.body.scrollX对象了。

所以在编程的时候，请加上这样的判断

if(document.body&&document.body.scrollTop&&document.body.scrollLeft)

{

top=document.body.scrollTop;

left=document.body.scrollleft;

}

if(document.documentElement&&document.documentElement.scrollTop&&document.documentElement.scrollLeft)

{

top=document.documentElement.scrollTop;

left=document.documentElement.scrollLeft;

}

Javascript中的常见问题

下面简单使用Jquery来操作iframe的一些记录，这个使用纯JS与可以实现。

第一、在iframe中查找父页面元素的方法：

$('#id',window.parent.document)

第二、在父页面中获取iframe中的元素方法：

$(this).contents().find("#suggestBox")

第三、在iframe中调用父页面中定义的方法和变量：

parent.method

parent.value

1.集合类对象问题

现有代码中许多集合类对象取用时使用()，IE能接受，Firefox不能。

解决方法：改用[]作为下标运算。如：document.forms("formName")改为

Js代码

document.forms["formName"];

//又如：

document.getElementsByName("inputName")(1);

//改为

document.getElementsByName("inputName")[1];

[js]
viewplaincopyprint?



2.DIV对象

在IE中，DIV对象可以使用ID作为对象变量名直接使用。在Firefox中不能。

DivId.style.display="none";

解决方法：document.getElementById("DivId").style.display="none";

ps:得对象的方法不管是不是DIV对象，都应该使用getElementById方法。

3.关于frame

现有问题：在IE中可以用window.testFrame取得该frame，mf中不行

解决方法：在frame的使用方面Firefox和IE的最主要的区别是：

如果在frame标签中书写了以下属性：

那么IE可以通过id或者name访问这个frame对应的window对象

而mf只可以通过name来访问这个frame对应的window对象

例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问

IE：window.top.frameId或者window.top.frameName来访问这个window对象

Firefox：只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签

并且可以通过window.top.document.getElementById("testFrame").src='xx.htm'来切换frame的内容

也都可以通过window.top.frameName.location='xx.htm'来切换frame的内容

4.窗口

现有问题：IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。

解决办法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。

如果需要传递参数，可以使用frame或者iframe。

5.在JS中定义各种对象变量名时，尽量使用id，避免使用name.

在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用。在Firefox中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。

6.document.all

Firefox可以兼容document.all，但会生成一条警告。可以用getElementById("*")或者getElementByTagName("*)来代替

不过对于document.all.length等属性，则完全不兼容。大家尽量不要使用document.all属性.

7.parentElement

IE中支持使用parentElement和parentNode获取父节点.

而Firefox只可以使用parentNode.

8.event

W3C不支持windows.event

比方说,在IE里面:

Js代码

functiononMenuClick(){

collapseMenu(event.srcElement);

}

[js]
viewplaincopyprint?



工作正常。不过在Firefox中，则改成：

Js代码

functiononMenuClick(evt){

if(evt==null)

evt=window.event;//ForIE

varsrcElement=evt.srcElement?evt.srcElement:evt.target;

//IE使用srcElement,而Firefox使用target

collapseMenu(srcElement);

[js]
viewplaincopyprint?



9.event.x与event.y问题

在IE中，event对象有x,y属性，Firefox中没有。

解决方法:

在Firefox中，与event.x等效的是event.pageX。但event.pageXIE中没有。

故采用event.clientX代替event.x。在IE中也有这个变量。

event.clientX与event.pageX有微妙的差别（当整个页面有滚动条的时候），

不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些：

Js代码

mX=event.x?event.x:event.pageX;

[js]
viewplaincopyprint?



然后用mX代替event.x

10.用idName字符串取得对象的问题

在IE中，利用eval(idName)可以取得id为idName的HTML对象，在Firefox中不能。

解决办法:用getElementById(idName)代替eval(idName).

14.nodeName和tagName问题

在Firefox中，所有节点均有nodeName值，但textNode没有tagName值。

在IE中nodeName的使用有时会有问题。

解决方法：

使用tagName，但应检测其是否为空。

15.input的type属性

IE下input.type属性为只读，但是Firefox下可以修改.

16.自定义属性

在mf中，自己定义的属性必须getAttribute()取得

而IE可以直接通过"."运算符获取.

17.const问题

在IE中不能使用const关键字。如

constconstVar=32;

在IE中这是语法错误.

解决方法:

不使用const，以var代替.

18.body对象

Firefox的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在.

19.img对象alt和title的解析

alt：当照片不存在或者load错误时的提示,

title：照片的tip说明,

在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用

在定义img对象时，最好将alt和title对象都写全，保证在各种浏览器中都能正常使用

20.childNodes获取的节点

childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点。

获取子节点时,一般可以通过node.getElementsByTagName()来回避这个问题。

21.removeNode()

Firefox中节点没有removeNode方法，必须使用如下方法

Js代码

node.parentNode.removeChild(node);

22.innerText

IE支持，FIREFOX不支持

FF中设置内容文本是用textConent属性.

23.XMLHTTP的区别

FireFox中的创建方法为:

Js代码

xmlhttp=newXMLHttpRequest()

而在IE中为:

Js代码

xmlhttp=newActiveXObject(”Microsoft.XMLHTTP”)

24.img的src刷新问题

在IE下可以用可以刷新图片，但在FireFox下不行。主要是缓存问题，在地址后面加个随机数就解决了:

Js代码

myImg.src=this.src+’?'+Math.random();

25.setAttribute()设置属性问题

IE中很多属性都不能用setAttribute进行设置,但Firefox中却可以,如:

Js代码

theDiv.setAttribute('style','color:red');

//改为:

object.style.cssText='color:red;';

setAttribute('class','styleClass')

//改为:

setAttribute('className','styleClass');

obj.setAttribute('onclick','funcitonname();');

//改为:

obj.onclick=function(){fucntionname();};

...等等

-----------------------------------------------------------------------------------------

IE和FIREFOX在解析CSS方面的区别

1.对高度的解析

IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度

Firefox：没有定义高度时，如果内容中包括了图片内容，Firefox的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！

3.布局问题

当你在写css的时候，特别是用float:left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border:0来约束，都无济于事。

其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float:left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin:0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

这只是一些简单的区别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现.

4.鼠标样式

firefox不支持hand，但ie支持pointer

解决方法:统一使用pointer

5.padding问题

padding5px4px3px1pxFireFox无法解释简写,

必须改成padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px;

6.消除ul、ol等列表的缩进

消除ul、ol等列表的缩进样式应写成:list-style:none;margin:0px;padding:0px;

其中margin属性对IE有效，padding属性对FireFox有效

7.CSS透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

8.CSS圆角

IE：不支持圆角。

FF：-moz-border-radius:4px，或者

-moz-border-radius-topleft:4px;

-moz-border-radius-topright:4px;

-moz-border-radius-bottomleft:4px;

-moz-border-radius-bottomright:4px;。

9.CSS双线凹凸边框

IE：border:2pxoutset;。

FF：

-moz-border-top-colors:#d4d0c8white;

-moz-border-left-colors:#d4d0c8white;

-moz-border-right-colors:#404040#808080;

-moz-border-bottom-colors:#404040#808080;

10.滤镜

IE中支持使用滤镜,而Firefox中不支持.

11.禁止选取网页内容：

在IE中一般用js：obj.onselectstart=function(){returnfalse;};

而firefox用CSS:-moz-user-select:none;