`

html 中各种宽高的理解 client offset width height

阅读更多

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

  • 大小: 17 KB
分享到:
评论

相关推荐

    三剑客:offset、client和scroll还傻傻分不清?

    在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内...

    Android基于google Zxing实现二维码的生成

    int offset = y * widthAndHeight; for (int x = 0; x &lt; widthAndHeight; x++) { pixels[offset + x] = bitMatrix.get(x, y) ? Color.BLACK : Color.WHITE; } } Bitmap bitmap = Bitmap.createBitmap(width...

    2021前端面试题精编.pdf

    获取元素宽度和高度的方式有很多,包括通过offset系列属性、client系列属性、scroll系列属性以及CSS中的`width`和`height`属性。 清除浮动的常用方法包括使用带有`clear`属性的伪元素、使用`overflow: auto;`或`...

    移动端 日期,树...等控件的js插件

    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', '...

    javascript获取隐藏dom的宽高 具体实现

    '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....

    javaScript座标获取

    它返回一个对象,包含了`top`, `right`, `bottom`, `left`, `width`和`height`等属性。例如: ```javascript var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect();...

    tabhost+滑动效果

    在`ClientDemo`这个项目中,你可以找到具体的实现代码和布局文件,通过查看和分析这些代码,你可以更好地理解如何在实际应用中实现`TabHost`与滑动效果的集成。如果你遇到了问题或者想要了解更多细节,可以进一步...

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

    `screen.height` 和 `screen.width` - **`screen.height`**:返回屏幕的物理高度。 - **`screen.width`**:返回屏幕的物理宽度。 ```javascript var screenHeight = window.screen.height; // 屏幕高度 var ...

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

    在JavaScript中,DOM元素的尺寸和位置是通过一系列属性来获取的,如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释: 1. **clientWidth...

    原生js实现放大镜效果

    通常需要用到`offset`、`client`等属性获取元素的位置和尺寸信息。 下面是一个简化的放大镜效果的示例代码结构: ```html &lt;!DOCTYPEhtml&gt; &lt;html lang="en"&gt; 放大镜-原生js封装 .magnifier-box { position: ...

    新浪推荐浮动广告

    /&gt; &lt;title&gt;test&lt;/title&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"&gt;&lt;br&gt;&lt;table height=1000&gt; &lt;tr&gt;&lt;td&gt;dddd&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; &lt;br&gt;...

    前端开源库-dom-kit

    dom-kit还包含了获取和设置元素尺寸、偏移以及可视区域相关的方法,如`width`、`height`、`offset`、`position`和`client`系列方法,帮助开发者准确地处理布局和动画。 **五、便利的辅助功能** 1. **动画效果**:...

    TMS Pack for FireMonkey2.3.0.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 ...

    FlexGraphics_V_1.79_D4-XE10.2_Downloadly.ir

    - 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 ...

    stdafx.h代码

    // 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)...

Global site tag (gtag.js) - Google Analytics