`
deng131
  • 浏览: 672642 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offset

阅读更多
在html中,任何一个元素都有三个表示位置和大小的对象:client,offset和scroll,每个对象都有相应的 height,width,top,left属性,那么这些究竟有什么区别呢?

    client属性是指一个元素直接可以看得到不包括边框的区域,所谓的直接可以看得到不包括边框是这样的概念:不包括滚动条占据的空间(实际上,如果出现了滚动条,元素的高度不会发生变化,clientHeight则会自动减少滚动条需要占据的17个像素的高度),不包括滚动条隐藏的区域、不包括边(border)。因此,clientHeight就是这个区域的高度,而clientTop实际上就是border的高度;
    offset属性是指一个元素直接可以看得到包括边框的区域,所谓的直接可以看得到包括边框是这样的概念:不包括滚动条隐藏的区域、包括边(border)的宽度。因此,offsetHeight就是这个区域的高度,而clientTop实际上是这个区域到它的父容器的距离;
    scroll高度和元素的边框没有关系,它是实际上元素的高度,因此,如果出现了滚动条,scrollHeight可能会大于offset或client 的高度。scrollTop则是元素的实际的顶部和可见的顶部这件的距离。

scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
ent.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、 offsetWidth、clientHeight、offsetHeight均无关)


测试代码:

<!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" lang="gb2312">
<head>

<head>

<title> 代码实例:关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 </title>

<meta http-equiv="content-type" content="text/html; charset=gb2312" />

<meta name="author" content="枫岩,CnLei.y.l@gmail.com">

<meta name="copyright" content="http://www.cnlei.com" />

<meta name="description" content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" />

<style type="text/css" media="all">

body {font-size:14px;}

a,a:visited {color:#00f;}

#Div_CnLei {

width:300px;

height:200px;

padding:10px;

border:10px solid #ccc;

background:#eee;

font-size:12px;

}

#Div_CnLei p {margin:0;padding:10px;background:#fff;}

</style>

<script type="text/javascript">

function Obj(s){

return document.getElementById(s)?document.getElementById(s):s;

}

function GetClientWidth(o){

return Obj(o).clientWidth;

}

function GetClientHeight(o){

return Obj(o).clientHeight;

}

function GetOffsetWidth(o){

return Obj(o).offsetWidth;

}

function GetOffsetHeight(o){

return Obj(o).offsetHeight;

}

</script>

</head>

<body>

<p> 点击下面的链接:</p>

<div id="Div_CnLei">

<p><a href="javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a> <a href="javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>

<p><a href="javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a> <a href="javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a></p>

</div>

<div id="Description">

<p><strong>IE6.0、 FF1.06+:</strong><br />

clientWidth = width + padding = 300+10×2 = 320<br />

clientHeight = height + padding = 200+10×2 = 220<br />

offsetWidth = width + padding + border = 300+10×2+10×2= 340<br />

offsetHeight = height + padding + border = 200+10×2+10×2 = 240</p>

<p><strong>IE5.0/5.5:< /strong><br />

clientWidth = width - border = 300-10×2 = 280<br />

clientHeight = height - border = 200-10×2 = 180<br />

offsetWidth = width = 300<br />

offsetHeight = height = 200</p>

</div>

</body>

</html>

Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)
scrollWidth
是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)

clientWidth
是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

offsetWidth
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
------------------------------------------------
一个scrollWidth和clientWidth的例子:
<html>
<head>
<title>77.htm 文件</title>
</head>

<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。
当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。
scrollWidth是对象实际内容的宽度。
clientWidth是对象看到的宽度(不含边线),这个例子里不会改变。
-----------------------------------------------
一个clientWidth和offsetWidth的例子:
<html>
<head>
<title>77.htm 文件</title>
</head>

<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>

offsetWidth 的值总是比clientWidth的值打
clientWidth是对象看到的宽度(不含边线)
offsetWidth是对象看到的宽度(含边线,如滚动条的占用的宽)

window.screen.availWidth     返回当前屏幕宽度(空白空间) 
window.screen.availHeight     返回当前屏幕高度(空白空间) 
window.screen.width     返回当前屏幕宽度(分辨率值) 
window.screen.height     返回当前屏幕高度(分辨率值) 
window.document.body.offsetHeight;     返回当前网页高度 
window.document.body.offsetWidth;     返回当前网页宽度 

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为 IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight   滚动条   边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、 Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、 offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

clientWidth 等指的是什么
scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)

clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

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

offsetHeight: 获取对象相对于版面或由父坐标 

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

offsetLeft: 获取对象相对于版面或由

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

offsetTop 属性指定的父坐标的计算顶端位置

offsetParent 属性指定的父坐标的高度

offsetParent 属性指定的父坐标的计算左侧位置

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

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

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

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

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

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height
分享到:
评论

相关推荐

    JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    在JavaScript中,理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关,尤其在处理滚动条和元素可视区域时...

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相...

    javascript中offset、client、scroll的属性总结

    JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素尺寸和位置的重要工具。下面是对这些属性的详细解释和应用场景: 1. **offset属性**: - `offsetWidth` 和 `offsetHeight`:这两个属性返回元素...

    JQuery坐标定位

    在Web开发中,对页面元素进行精确的定位是非常重要的,而JQuery作为一款优秀的JavaScript库,提供了强大的工具来帮助开发者轻松实现这一点。本文将深入探讨JQuery坐标定位的相关知识点,包括如何获取浏览器的各种...

    js中offset,client , scroll 三大元素知识点总结

    offset系列主要用于获取元素相对于文档定位的位置信息,包括offsetLeft和offsetTop属性。这些属性通常用在需要获取元素具体位置的场景中,例如计算元素在页面上的绝对位置或用于弹框定位。 - element.offsetLeft:...

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

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

    javascript的offset、client、scroll使用方法详解

    值得一提的是,offset系列属性的offsetParent通常是指离当前元素最近的定位过的(position属性值不是static的)父级元素。而client系列属性和scroll系列属性则不依赖于父级元素,它们始终描述的是元素自身的信息。 ...

    JavaScript 获取浏览器的显示区域大小信息

    - **Offset Size**:包括了元素的宽度、高度以及边框(border),但不包括外边距(margin)。 - **Scroll Size**:表示元素(如页面)的实际宽度和高度,包括任何不可见的部分。 - **Screen Size**:屏幕的尺寸,可以是...

    javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 可以分别获取HTML元素的clientWidth和clientHeight,这在处理全屏布局或页面整体尺寸时很有用。 理解并熟练运用这些属性...

    BOM browser objcet model.docx

    - `scroll`系列:`scrollLeft`和`scrollTop`表示元素的水平和垂直滚动距离,`scrollWidth`和`scrollHeight`则表示内容的实际宽高。 BOM中的事件处理也非常重要,例如`click`事件用于响应点击,`focus`和`blur`处理...

    jQuery javascript获得网页的高度与宽度的实现代码

    1. **网页可见区域宽**:`document.body.clientWidth` 这个属性返回不包括滚动条的浏览器窗口宽度。 2. **网页可见区域高**:`document.body.clientHeight` 返回不包括滚动条的浏览器窗口高度。 3. **网页可见区域宽...

    jQuery滚动条

    jQuery提供了一些内置方法来获取和设置元素的滚动位置,如`scrollTop()`和`scrollLeft()`。它们分别返回或设置元素的垂直和水平滚动位置: ```javascript var scrollTopValue = $("#scrollContainer").scrollTop(); ...

    Js与Jq 获取页面元素值的方法和差异对比

    - `obj.scrollWidth`:返回元素的总宽度,包括超出视窗的部分。 - `obj.scrollHeight`:返回元素的总高度,包括超出视窗的部分。 - `obj.scrollLeft`:设置或获取位于元素左侧的滚动条位置。 - `obj.scrollTop`:...

    小程序click-scroll组件设计

    - scrollLeft:隐藏在内容区域左侧的像素数,用于调整滚动位置。 - scrollTop:隐藏在内容区域上方的像素数,同样用于调整滚动位置。 四、组件设计思路 click-scroll组件的设计主要考虑以下几个方面: - 创建一...

    js获取控件位置以及不同浏览器中的差别介绍

    在实际开发中,为了获取更为精确的位置信息,我们通常会使用offset系列属性。获取位置信息时,一个常用的函数getpos会计算一个元素相对于文档的顶部和左侧边界的偏移量。函数通过递归地累加offsetTop和offsetLeft的...

Global site tag (gtag.js) - Google Analytics