- 浏览: 672642 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zhouyicang:
为嘛人气不够,这么好的文章,我找了几十篇博客,才找到这篇解惑了 ...
HTML 块级元素/内联元素 -
young7:
不错,解惑了
HTML 块级元素/内联元素 -
lvjin948:
获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型 -
tarena_hhh:
我用了css优化工具,发现他的顺序有很大不一样?????
CSS属性书写顺序及命名规则 -
deng131:
谢谢你的提醒,是有个地方写错了
javascript事件绑定addEventListener,attachEvent
在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均无关)
测试代码:
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
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
发表评论
-
IE浏览器stylesheets加载资源限制问题
2015-03-08 20:30 1067@import url()做一下总结: 1:@import ... -
理解Javascript原型及继承
2012-08-15 22:13 1345js初次使用起来觉得很简单但是在使用一段时间后很不深入的理解原 ... -
JS判断IE浏览器支持版本
2012-02-01 19:00 2964/* * @description 判断是否是IE,返回具体 ... -
jsonp动态创建script方式IE9问题
2012-02-01 16:28 2379在IE9浏览器创建一个script元素,然后指定其src属性u ... -
IE9下使用jsonp方式调用问题
2012-01-31 19:03 22891. 如果JSONP返回的Content-Type不符合规范, ... -
JavaScript获取浏览器语言类型
2011-12-31 18:24 7804获取浏览器语言: IE: navigator.browser ... -
IE Security Comprehensive Protection
2011-12-19 20:14 1762IE浏览器安全方面的处理,本人英文不好建议大家直接看英文: ... -
javaScript 中比较数字字符串问题
2011-10-10 21:49 4672在实现前端页面排序功能过程中遇到的问题,由于自己的粗心导致了生 ... -
javascript设置label标签 for属性
2011-09-11 10:36 3605js创建label标签的for属性用来增加操作响应区域。 v ... -
javascript事件绑定addEventListener,attachEvent
2011-07-31 18:55 3518为了考虑浏览器的兼容性问题,都需要对浏览器进行类型检测。 f ... -
readyState五种状态详解
2011-07-24 14:15 1608(0) UNINITIALIZED 未初始化 The obje ... -
getElementByTagName 与 querySelectorAll
2011-07-14 11:29 1478虽然网上有中文翻译但是还是直接看英文有感觉。getElemen ... -
拖放 Drag and drop 方法
2011-07-10 18:55 1524虽然网上又很多实现方法,但是还是需要理解拖放原理。通过绑定on ... -
闭包传入参数 window & undefined
2011-07-03 08:53 2301大家在前端开发中对闭包应该和熟悉了,也就是几种常见的闭包方式: ... -
textarea光标位置插入文字
2011-06-18 18:14 2126各浏览器TextArea获得焦点后的光标位置情况: text ... -
IE6上Array不支持indexOf方法
2011-06-06 10:17 2250在IE6不支持Array上indexOf方法,又是可恶的ie, ... -
处理不支持JavaScript脚本情况
2011-05-26 10:24 1337现在主流的浏览器都支持javascrip, 但还是有小部分不支 ... -
动态创建iframe设置属性name问题
2011-04-20 13:54 2727通常iframe的name可以是link或者form的targ ... -
WebSocket and Socket.IO
2011-04-06 15:39 3462WebSocket API是下一代客户端-服务器的异步通信方法 ... -
Preload CSS/JavaScript预加载
2011-04-06 10:20 1468希望达到效果是页面第一次载入以后,如果在次刷新页或者进入下一个 ...
相关推荐
在JavaScript中,理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关,尤其在处理滚动条和元素可视区域时...
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相...
JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素尺寸和位置的重要工具。下面是对这些属性的详细解释和应用场景: 1. **offset属性**: - `offsetWidth` 和 `offsetHeight`:这两个属性返回元素...
在Web开发中,对页面元素进行精确的定位是非常重要的,而JQuery作为一款优秀的JavaScript库,提供了强大的工具来帮助开发者轻松实现这一点。本文将深入探讨JQuery坐标定位的相关知识点,包括如何获取浏览器的各种...
offset系列主要用于获取元素相对于文档定位的位置信息,包括offsetLeft和offsetTop属性。这些属性通常用在需要获取元素具体位置的场景中,例如计算元素在页面上的绝对位置或用于弹框定位。 - element.offsetLeft:...
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线...
值得一提的是,offset系列属性的offsetParent通常是指离当前元素最近的定位过的(position属性值不是static的)父级元素。而client系列属性和scroll系列属性则不依赖于父级元素,它们始终描述的是元素自身的信息。 ...
- **Offset Size**:包括了元素的宽度、高度以及边框(border),但不包括外边距(margin)。 - **Scroll Size**:表示元素(如页面)的实际宽度和高度,包括任何不可见的部分。 - **Screen Size**:屏幕的尺寸,可以是...
- `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 可以分别获取HTML元素的clientWidth和clientHeight,这在处理全屏布局或页面整体尺寸时很有用。 理解并熟练运用这些属性...
- `scroll`系列:`scrollLeft`和`scrollTop`表示元素的水平和垂直滚动距离,`scrollWidth`和`scrollHeight`则表示内容的实际宽高。 BOM中的事件处理也非常重要,例如`click`事件用于响应点击,`focus`和`blur`处理...
1. **网页可见区域宽**:`document.body.clientWidth` 这个属性返回不包括滚动条的浏览器窗口宽度。 2. **网页可见区域高**:`document.body.clientHeight` 返回不包括滚动条的浏览器窗口高度。 3. **网页可见区域宽...
jQuery提供了一些内置方法来获取和设置元素的滚动位置,如`scrollTop()`和`scrollLeft()`。它们分别返回或设置元素的垂直和水平滚动位置: ```javascript var scrollTopValue = $("#scrollContainer").scrollTop(); ...
- `obj.scrollWidth`:返回元素的总宽度,包括超出视窗的部分。 - `obj.scrollHeight`:返回元素的总高度,包括超出视窗的部分。 - `obj.scrollLeft`:设置或获取位于元素左侧的滚动条位置。 - `obj.scrollTop`:...
- scrollLeft:隐藏在内容区域左侧的像素数,用于调整滚动位置。 - scrollTop:隐藏在内容区域上方的像素数,同样用于调整滚动位置。 四、组件设计思路 click-scroll组件的设计主要考虑以下几个方面: - 创建一...
在实际开发中,为了获取更为精确的位置信息,我们通常会使用offset系列属性。获取位置信息时,一个常用的函数getpos会计算一个元素相对于文档的顶部和左侧边界的偏移量。函数通过递归地累加offsetTop和offsetLeft的...