JS：offsetWidth\offsetleft 等图文解释 (2010-11-01 10:50:41)转载▼
标签： it分类： 工作日志
图片见附件.
document.documentElement.clientHeight 与 document.body.clientHeight 区别
当html有<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
得到客户端高度方法为：document.documentElement.clientHeight 否则用 document.body.clientHeight
通用方法：var height = document.documentElement.clientHeight || document.body.clientHeight
网页可见区域宽： 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 相对文档的水平座标+垂直方向滚动的量
以上主要指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
HTML控件offsetTop、scrollTop等属性
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
转载：http://blog.sina.com.cn/s/blog_63426ff90100m8c3.html
相关推荐
在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义：元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定，包括所有内...
int offset = y * widthAndHeight; for (int x = 0; x < widthAndHeight; x++) { pixels[offset + x] = bitMatrix.get(x, y) ? Color.BLACK : Color.WHITE; } } Bitmap bitmap = Bitmap.createBitmap(width...
获取元素宽度和高度的方式有很多，包括通过offset系列属性、client系列属性、scroll系列属性以及CSS中的`width`和`height`属性。 清除浮动的常用方法包括使用带有`clear`属性的伪元素、使用`overflow: auto;`或`...
Math.max(c['scroll' + b], c['offset' + b], h['client' + b], h['scroll' + b], h['offset' + b]) : (t = this.offset()) && t[k] : this.each(function () { a(this).css(k, n) }) } }); [ 'width', '...
'WidthHeight'.replace(/[^]+/g,function(i){ var a = i.toLowerCase(); wh[a] = elem['offset'+i] || elem['client'+i]; }); return wh; }; if(getCss(dom,'display') === 'none'){ var nDom = dom....
它返回一个对象，包含了`top`, `right`, `bottom`, `left`, `width`和`height`等属性。例如： ```javascript var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect();...
在`ClientDemo`这个项目中，你可以找到具体的实现代码和布局文件，通过查看和分析这些代码，你可以更好地理解如何在实际应用中实现`TabHost`与滑动效果的集成。如果你遇到了问题或者想要了解更多细节，可以进一步...
`screen.height` 和 `screen.width` - **`screen.height`**：返回屏幕的物理高度。 - **`screen.width`**：返回屏幕的物理宽度。 ```javascript var screenHeight = window.screen.height; // 屏幕高度 var ...
在JavaScript中，DOM元素的尺寸和位置是通过一系列属性来获取的，如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释： 1. **clientWidth...
通常需要用到`offset`、`client`等属性获取元素的位置和尺寸信息。 下面是一个简化的放大镜效果的示例代码结构： ```html <!DOCTYPEhtml> <html lang="en"> 放大镜-原生js封装 .magnifier-box { position: ...
/> <title>test</title><br></head><br><body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"><br><table height=1000> <tr><td>dddd</td></tr> </table> </body> </html> <br>...
dom-kit还包含了获取和设置元素尺寸、偏移以及可视区域相关的方法，如`width`、`height`、`offset`、`position`和`client`系列方法，帮助开发者准确地处理布局和动画。 **五、便利的辅助功能** 1. **动画效果**：...
Fixed : Issue with height of tabs in TTMSFMXNavBar v2.0.2.0 New : OnButtonClick event in TTMSFMXEditBtn Fixed : Issue with fixed cell property persistence in TTMSFMXGrid Fixed : Issue with Excel ...
- FIX: The height of the TFlexRegularPolygon object incorrectly changes with its rotation. - FIX: Added division by zero protect in method TFlexControl.MovePathSegment. - FIX: The background beyond ...
// half-height caption frame wnd // views on a document class CView; // a view on a document class CScrollView; // a scrolling view class CWinThread; // thread base class class CWinApp; // ...
// Center icon in client rectangle int cxIcon = GetSystemMetrics(SM_CXICON); int cyIcon = GetSystemMetrics(SM_CYICON); CRect rect; GetClientRect(&rect); int x = (rect.Width() - cxIcon + 1)...