`

height、clientHeight、scrollHeight、offsetHeight区别

 
阅读更多

 

height、clientHeight、scrollHeight、offsetHeight区别

 

$(window).height(); //浏览器当前窗口可视区域高度 
$(document).height(); //浏览器当前窗口文档的高度 
$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin 
$(window).width(); //浏览器当前窗口可视区域宽度 
$(document).width();//浏览器当前窗口文档对象宽度 
$(document.body).width();//浏览器当前窗口文档body的高度 
$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin
 
 

 
scrollHeight: 获取对象的滚动高度。   
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  
scrollWidth:获取对象的滚动宽度  
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
event.clientX 相对文档的水平座标  
event.clientY 相对文档的垂直座标
 
 
  • 大小: 18.1 KB
分享到:
评论

相关推荐

    分析clientHeight、offsetHeight、scrollHeight

    在网页开发中,理解和使用`clientHeight`、`offsetHeight`和`scrollHeight`这三个属性是至关重要的。它们都是JavaScript中用于获取元素尺寸的方法,但各有其特定的用途和应用场景。 首先,`clientHeight`属性返回一...

    clientHeight

    ### 四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和_scrollWidth 的解析 在前端开发过程中,我们经常会遇到需要获取页面元素尺寸的情况,这其中包括了元素的高度(`...

    js关于不同浏览器的不同之处

    本文将详细介绍`clientHeight`, `offsetHeight`, `scrollHeight`以及与屏幕尺寸相关的`window.screen.availWidth`, `window.screen.availHeight`, `window.screen.width`, `window.screen.height`, `document.body....

    详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    尺寸相关:offsetHeight、clientHeight、scrollHeight; 偏移相关:offsetTop、clientTop、scrollTop、pageYOffset、scrollY; 获取相对视口位置:Element.getBoundingClientRect(); 获取元素的style对象:...

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

    clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    ### 对offsetLeft,offsetTop,scrollLeft,scrollTop...在这个例子中,我们创建了一个宽度过长的`<div>`元素,并通过JavaScript输出了`clientHeight`, `offsetHeight`, `scrollHeight`等属性值,以便观察它们之间的区别。

    js中不同的height, top的区别对比

    在JavaScript中,处理元素的尺寸和位置时,经常会遇到几个关键的属性,它们分别是`clientHeight`, `offsetHeight`, `scrollHeight`, `clientTop`, `offsetTop` 和 `scrollTop`。这些属性对于理解和操作页面元素的...

    javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    } else if (document.body.scrollHeight > document.body.offsetHeight){ yScroll = document.body.scrollHeight; } else { yScroll = document.body.offsetHeight; } var windowHeight; if (self....

    获取页面元素实际宽高的属性的使用

    本文将详细介绍`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`、`offsetHeight`等属性及其应用场景。 #### `clientWidth` 和 `clientHeight` - **定义**:`clientWidth`用于获取...

    html DOM 节点的各种高度属性

    如果元素没有滚动条,`scrollHeight`通常等于`clientHeight`。 4. `borderTopWidth`和`borderBottomWidth` 这两个属性分别提供了元素顶部和底部边框的宽度。当计算元素总高度时,需要将这两个值加到`clientHeight`...

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

    具体来说,原本归属于 `document.body` 的一些属性(如 `clientHeight`, `clientWidth`, `offsetWidth`, `offsetHeight`, `scrollWidth`, `scrollHeight`, `scrollTop`, 和 `scrollLeft`)会被重新分配给 `document....

    javascript获取设置div的高度和宽度兼容任何浏览器.docx

    - **现代浏览器**:`offsetHeight`, `offsetWidth`, `clientHeight`, `clientWidth`, `scrollHeight`, `scrollWidth` 均支持。 - **Internet Explorer**:除了 `clientHeight` 和 `clientWidth` 外,其他属性也均...

    javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx

    } else if (document.body.scrollHeight > document.body.offsetHeight) { // 除了IE外的所有浏览器 yScroll = document.body.scrollHeight; } else { // IE6 Strict模式以及其他浏览器 yScroll = document....

    JS中位置与大小的获取方法

    本文将详细解析`scrollHeight`、`clientHeight`以及`offsetHeight`这三个属性的区别,并通过实例演示它们的应用。 1. `scrollHeight`: `scrollHeight`属性表示DOM元素的实际内容高度,它不包括边框(border),但...

    iframe高度自适应 js

    height = document.documentElement.scrollHeight; } parent.changeIframeSize(height < 450 ? 450 : height + 100); }); ``` **解析:** - **事件监听**:`$(document).ready`确保DOM完全加载后执行函数。 - *...

    浅析jquery如何判断滚动条滚到页面底部并执行事件

    首先,我们需要了解三个关键的DOM元素属性:clientHeight、offsetHeight和scrollTop。 1. **clientHeight**: clientHeight属性表示一个元素在视口中的可视高度,不包括滚动条。如果一个元素有滚动条,...

Global site tag (gtag.js) - Google Analytics