`

html&Document&Body

阅读更多
document.body.scrollTop用法
网页可见区域宽: 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 相对文档的水平座标+垂直方向滚动的量


要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签
分享到:
评论

相关推荐

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

    在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时,我们深入分析了浏览器在处理页面滚动位置时的不同行为,尤其是当滚动位置值始终为0时的...

    document.body属性.document.body.scrollTop

    在JavaScript的世界里,`document.body` 是一个非常关键的对象,它代表了HTML文档中的<body>元素,这个元素包含了网页上可见的所有内容,除了部分。`document.body` 属性提供了一个直接与<body>元素交互的方式,使得...

    HTML Document HTML Document HTML Document

    "HTML Document HTML Document HTML Document"的标签可能涵盖了HTML标签的学习、理解和应用,包括头部标签(如`<head>`)、主体标签(如`<body>`)、段落标签(如`<p>`)、标题标签(如`<h1>`至`<h6>`)、链接标签...

    深入探讨:JavaScript中的`document.head`与`document.body`属性

    document.head和document.body是两个重要的属性,它们分别代表了HTML文档的头部(head)和主体(body)。理解这两个属性的区别和用途对于前端开发者来说至关重要。本文将详细探讨document.head与document.body的区别...

    js document对象详解

    7. document.body.innerHTML:设置 `<body>` 和 `</body>` 之间的 HTML 代码。 8. document.body.topMargin:页面上边距。 9. document.body.leftMargin:页面左边距。 10. document.body.rightMargin:页面右边距。...

    document.documentElement和document.body区别介绍

    在HTML文档对象模型(DOM)中,document.documentElement和document.body是两个重要的属性,它们各自代表了不同的节点。理解这两者的区别对于前端开发者来说是非常重要的。 首先,document.documentElement代表了...

    用JS(javascript)从另一个html中读取标题和正文body

    - 如果目标HTML文件和当前页面在同一域下,可以将目标HTML加载到一个隐藏的IFrame中,然后通过`window.frames`或`contentWindow`属性访问IFrame的`document`对象,获取标题和body。 一旦获取到HTML文本,解析标题...

    JavaScript获得当前网页来源页面(即上一页)的方法

    本文实例讲述了JavaScript获得...body> The referrer of this document is: [removed] [removed](document.referrer); [removed] </body> </html> 希望本文所述对大家的javascript程序设计有所帮助。

    深入解析:`document.documentElement` 与 `document.body` 的差异及其应用

    在JavaScript的DOM操作中,document.documentElement 和 document.body 是两个非常重要的属性,它们分别代表了文档的不同部分。理解这两者之间的区别对于前端开发者来说至关重要,尤其是在进行页面布局和滚动操作时...

    document属性和方法.txt

    var htmlContent = document.body.innerHTML; console.log(htmlContent); // 设置body的HTML内容 document.body.innerHTML = "这是一个新标题。</h1>"; ``` ##### 9. `document.body.onclick` 用于设置当用户...

    javascript的document对象

    - **document.body.appendChild(oTag)**:将一个HTML元素追加到`<body>`元素的子节点列表中。 #### Body元素属性 - **document.body**:访问HTML文档的`<body>`元素。 - **document.body.bgColor**:设置或获取`...

    JavaScript的document方法汇总

    - `document.body.innerHTML`:获取或设置`<body>`内的HTML代码。 - `document.body.topMargin`:设置或获取上边距。 - `document.body.leftMargin`:设置或获取左边距。 - `document.body.rightMargin`:设置或...

    JS的document_详细介绍及用法

    6. `document.body.appendChild(oTag)`: 将新的HTML对象添加到body元素的末尾,实现动态生成元素。 ### 三、`document.body`子对象 `document.body`代表HTML文档的主体部分,提供了以下属性和方法: 1. `document...

    document对象总结

    - **document.body.appendChild(oTag)**: 将新的HTML元素添加到body中。 #### 事件处理 `document.body`还支持各种事件监听,如: - **document.body.onclick**: 当用户点击body时触发的事件。 - **document.body...

    javascript document对象详细介绍

    7. **`document.body.innerHTML`**:设置或获取`<body>`标签内的HTML内容。 ```javascript document.body.innerHTML = "这是一个标题</h1><p>这是一段文字。</p>"; ``` 8. **`document.body.topMargin`**、**`...

    html document

    4. **`<body>`**:文档主体,包含所有可见的内容,如文本、图像、链接等。 #### 三、常用标签详解 - **`<p>`**:段落标签,用于定义文本段落。 - **`<b>`**:粗体文本标签,用于强调文本内容,但不建议过度使用。 ...

    Document对象内容集合

    - **`document.body.innerHTML`**:获取body内部的所有HTML内容。 - **`document.body.topMargin`**:获取或设置body顶部边距。 - **`document.body.leftMargin`**:获取或设置body左侧边距。 - **`document.body....

    HTML Document 1.5 html傻瓜代码编辑器

    "HTML Document 1.5 html傻瓜代码编辑器"是一款专为初学者设计的编辑工具,旨在简化HTML代码的编写过程,让用户能够更轻松地创建和修改HTML网页。 HTML文档的基本结构包括头部(head)和主体(body)。头部包含了元...

    不出现滚动条移动表格

    body> <table border=1> <tr><td>bayern1</td><td>bayern2</td><td>bayern3</td><td>bayern4</td><td>bayern5</td><td>bayern6</td></tr> <tr><td>bayern1</td><td>bayern2</td><td>bayern3</td><td...

    javascript 的document对象

    - `document.body.innerText` 和 `document.body.innerHTML`: 分别获取或设置`<body>`元素内的纯文本和HTML代码。 - `document.body.margin*`: 用于设置页面边距,现代做法是通过CSS样式。 - `document.body....

Global site tag (gtag.js) - Google Analytics