`
dingjun1
  • 浏览: 213241 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

W3C document.body document.documentElement

阅读更多
转载: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;
分享到:
评论

相关推荐

    火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    在火狐浏览器中,通常情况下`document.body.scrollTop`和`document.documentElement.scrollTop`返回相同的值,因为火狐遵循了W3C的标准,即在文档完全加载后,这两个属性应该反映页面的实际滚动位置。 #### 谷歌...

    document.documentElement &amp;&amp; document.documentElement.scrollTop

    这个属性在标准浏览器环境下是可用的,特别是在那些遵循W3C DOM规范的现代浏览器中,如Chrome、Firefox、Safari和Edge。 然而,值得注意的是,不是所有浏览器都支持`document.documentElement.scrollTop`。在一些较...

    用document.documentElement取代document.body的原因分析

    上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...

    解决VUE中document.body.scrollTop为0的问题

    在这种模式下,浏览器会使用W3C标准,即使用document.documentElement来访问整个文档的根元素。document.documentElement代表的是标签,因此在使用scrollTop属性时,应该使用document.documentElement.scrollTop来...

    javascript获取滚动条高度 页面宽度与高度

    - 在 Firefox 和 Opera 中,`document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示页面宽度减去`BODY`的外边距(`margin`)后的宽度和高度。 为了确保代码的兼容性,开发者在...

    javascript 获取网页高度宽度.pdf

    - `document.documentElement.clientHeight` 返回可视区域的高度(如果定义了W3C标准,则有效)。 - **Firefox**: - `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回 `BODY` 元素的宽度...

    document.body.scrollTop 值总为0的解决方法 比较常见的标准问题

    在标准模式下,IE和Firefox等现代浏览器倾向于遵循W3C标准,其中规定应该使用`document.documentElement.scrollTop`来获取整个页面的滚动位置,而不是`document.body.scrollTop`。因此,当你尝试通过`document.body....

    js中的如何定位固定层的位置.docx

    但在W3C标准模式下(如XHTML文档),`document.body.scrollTop`通常返回0,此时应使用`document.documentElement.scrollTop`和`document.documentElement.scrollLeft`来获取正确的滚动值。 以下是一段具有良好兼容...

    由document.body和document.documentElement想到的

    在Web开发中,理解和掌握`document.body`和`document.documentElement`的区别至关重要,尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分:`document.body`指的是HTML文档的实际内容...

    获取页面长宽和滚动条的位置

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; function GetPageSize() { var ...

    js获取浏览器高度和宽度值(多浏览器)

    对于W3C的标准,`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 应该返回浏览器窗口的可视区域大小,但不同浏览器的实现有所差异。在没有定义标准的情况下,IE返回0,而Fire...

    取框架/body的高度height

    - Firefox和Opera遵循W3C标准,它们的`document.documentElement.clientWidth`和`document.documentElement.clientHeight`会考虑`margin`的影响。 - 为了解决不同浏览器间的兼容性问题,通常需要编写适配代码来确保...

    javascript document.compatMode兼容性

    document.body.scrollLeft : document.documentElement.scrollLeft; var sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; } ``` 这段代码首先...

    关于获取各种浏览器可见窗口大小

    - 不论是否定义W3C标准,`document.body.clientWidth` 和 `document.body.clientHeight` 返回的都是浏览器窗口的可见尺寸。 - 而 `document.documentElement.clientWidth` 和 `document.documentElement....

    JS获取浏览器的高度和宽度

    - `document.body.clientWidth` 和 `document.body.clientHeight` 同样返回BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的是包含边距的页面...

    Javascript 获取页面高度(多种浏览器)

    W3C 标准推荐使用 `document.documentElement` 来引用文档元素(通常为 `&lt;html&gt;`),因为它提供了更全面的布局信息。在标准模式下,`document.documentElement.clientWidth` 和 `document.documentElement....

    js获取浏览器高度和宽度值.pdf

    - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`: 这两个属性在W3C标准中定义,用于获取HTML根元素(`&lt;html&gt;`)的宽度和高度。在IE中,如果doctype声明了,这两个属性会返回...

    doctype后如何获得body.clientHeight的方法

    - **`document.documentElement` 与 `document.body` 的区别**:在标准模式下,`document.documentElement` 指的是 `&lt;html&gt;` 元素,而 `document.body` 指的是 `&lt;body&gt;` 元素。这两个元素在不同情况下存储着不同的...

    JS浏览器的高度和宽度

    在 IE 中,如果未定义 W3C 标准,则这两个属性的值都为 0。 #### 3. 获取页面对象的宽度和高度(Opera 特有) - **`document.documentElement.clientWidth`**: 返回页面对象宽度(即 BODY 对象宽度加上 Margin ...

Global site tag (gtag.js) - Google Analytics