转载:http://www.seobye.com/div-css/87 http://www.seobye.com/div-css/90
下面的内容没有完整转载,如果要查看完整内容请去原网站。
1、若网页中含有< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >这一行代码,则应该使用document.documentElement
2、若网页中只有而没有上面的一行代码,则JS脚本应该使用document.body
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在不声明Doctype的情况下,浏览器默认是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
当文档有了标准声明时, document.compatMode 的值就等于 “CSS1compat”, 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode==”CSS1Compat” ? document.documentElement.clientHeight : document.body.clientHeight;
当文档有了标准声明时火狐的style.top等等的设置必须加上“px”等单位,否则它不会认。既然已经说道了这,再展开一下。对于火狐:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式(即使在css中设定也不行),则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到 document.body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带< !DOCTYPE..>标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用 document.documentElement来取代document.body,可以这样写
例:
var top = document.documentElement.scrollTop || document.body.scrollTop;
分享到:
相关推荐
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > function GetPageSize() { var ...
找的前一个该程序,其中的document.body在ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd声明中已经无效,所以造成了页面上不能随页面浮动,我已经把document.body已替换成document.documentElement,现在...
在qq目录下,生成有三个JS文件,找到bottom.js,用记事本打开,将“document.body”全部修改为“document.documentElement”就可以了,因为这里生成的JS,有些地方不符合W3C的标准,如果还是不滚动,请查看你模板里...
//Opera仍然使用 document.body.clientWidth document.body.clientHeight //可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight //原来是W3C的标准在作怪
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/} //...
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } gapx = (posx-...
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); ...
w3c的table部分中说width属性是the desired width of the entire table,我估计entire就是包含了padding和border,找不到什么其他说明,先这么理解吧。 定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed...
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 便民设施系统 ; charset=gbk"/> <link rel="stylesheet" type="text/css" href="style.css"> src=...
<!DOCTYPE ... charset=gb2312" /> <title>test</title><br></head><br><body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"> <table height=1000> <tr><td>dddd</td></tr> </table> ...
swf_width=document.documentElement.clientWidth; document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia....
//define('STYLE_PATH',str_replace($_SERVER['DOCUMENT_ROOT'],'',ROOT_DIR)); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <title> NarBar table ; charset=...
W3C组织正在研究一种名为RDF(Resource Description Framework)的metadata处理方法,可以自动交换信息,W3C宣称,使用RDF配合数字签名,将使网络中存在"真实可信"的电子商务。 六.显示 单独用XMl不能显示页面,...