`
newleague
  • 浏览: 1501043 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

js offsetHeight offsetWidth 解说

阅读更多

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

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

  测试代码:

 

CODE:

[Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">

<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" 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="[url=http://www.cnlei.com]http://www.cnlei.com[/url]" />

<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=http://bbs.chinaunix.net/"javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a>    <a href=http://bbs.chinaunix.net/"javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>

<p><a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a>    <a href=http://bbs.chinaunix.net/"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>

 

 

HTML控件offsetTop、scrollTop等属性
假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:
<div id="tool">
   <input type="button" value="提交">
   <input type="button" value="重置">
</div>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的)。

http://hi.baidu.com/mingyue16/blog/item/f3e27aac05f1130e4b36d65a.html

http://www.cftea.com/c/2006/12/WOYNSH75QM4NPFRS.asp

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/mtzai/archive/2009/05/27/4220320.aspx

分享到:
评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

    在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前,我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...

    分析clientHeight、offsetHeight、scrollHeight

    总的来说,`clientHeight`、`offsetHeight`和`scrollHeight`是JavaScript中处理元素尺寸的重要工具,它们在网页布局、响应式设计、滚动事件处理等方面起着核心作用。熟练掌握它们的用法,是每个前端开发者必备的技能...

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中,offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的,它们都是关于位置定位...

    07-offsetHeight-scrollHeight-clientHeight-区别.md

    offsetHeight和offsetWidth属性返回元素的外部高度和宽度,包括元素的垂直边框(border)、水平方向的内边距(padding)、以及元素的content部分的尺寸,但不包括外边距(margin)。 #### 重要概念 - **...

    offsetHeight在OnLoad中获取为0的现象

    `offsetHeight` 是一个非常重要的 JavaScript 属性,它用于获取一个元素的总高度,包括内边距、边框,但不包括外边距。然而,在某些特定情况下,尤其是在页面加载(OnLoad)事件中尝试获取 `offsetHeight` 时,可能...

    entHeight、offsetHeight 和 scrollHeight

    在JavaScript中,`...总的来说,理解和掌握`clientHeight`、`offsetHeight`和`scrollHeight`的差异是进行JavaScript页面交互和布局优化的基础,它们提供了对网页内容可视部分、总尺寸以及可滚动部分的精确控制。

    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    ### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中,处理页面布局和滚动效果时经常会用到一些DOM属性,如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...

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

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

    【JavaScript源代码】JavaScript实现商品放大镜效果.docx

    ### JavaScript 实现商品放大镜效果 #### 知识点概览 1. **HTML 结构设计**:构建页面布局及元素。 2. **CSS 样式设置**:定义样式及响应用户交互时的视觉变化。 3. **JavaScript 事件监听与处理**:实现鼠标移动时...

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

    - **定义**:`offsetHeight` 和 `offsetWidth` 属性返回元素的高度和宽度,包括内边距(padding)、边框(border),但不包括外边距(margin)。 - **示例**: ```javascript var div1 = document....

    【JavaScript源代码】js实现购物网站放大镜功能.docx

    在JavaScript编程中,实现购物网站的放大镜功能是一项常见的需求,尤其在电子商务网站上,它能为用户提供更直观的产品细节视图。以下是如何利用JavaScript来实现这一功能的详细步骤: 首先,我们需要创建HTML布局,...

    【JavaScript源代码】原生JS实现京东查看商品点击放大.docx

    【JavaScript源代码】原生JS实现京东查看商品点击放大 在网页设计中,商品展示时经常需要实现一种功能,即用户在浏览商品图片时,当鼠标移入图片,图片会放大并显示在一个独立的区域,同时有一个半透明的遮罩层跟随...

    JS里各种宽度和高度的句柄

    在JavaScript(JS)中,获取和操作元素的宽度与高度是常见的需求,特别是在网页动态布局、用户交互以及响应式设计中。本主题将深入探讨如何使用JavaScript处理元素的宽度和高度,以及相关的尺寸句柄。 首先,我们有...

    通过JAVAScript实现页面自适应.doc

    首先,需要获取屏幕的宽高,可以使用 `document.body.offsetHeight` 和 `document.body.offsetWidth` 获取当前屏幕的宽高。然后,需要确定哪些元素是绝对位置固定的,哪些元素是相对位置固定的,哪些元素的宽高是...

    JS网页图片放大镜特效.pdf

    本篇文章将详细讲解如何使用JavaScript(JS)实现这种网页图片放大镜特效。 首先,我们需要准备HTML结构。在这个例子中,我们创建了一个包含两个图片的无序列表(`&lt;ul&gt;`)。每个图片(`&lt;img&gt;`)都被包裹在一个浮动...

    javascript弹弹球

    很详细的解说了弹弹球的原理,我给的注释很多很详细,便于大家理解。 代码内的注释详细解说了距离...可以很清晰得看到offsetWidth,offsetHeight,document.body.clientWidth,document.clientHeight 这4个属性的用法。

    js操作图片等比缩放及旋转

    img.style.transform = `translate(${img.offsetWidth/2}px, ${img.offsetHeight/2}px) rotate(${rotation}deg) translate(-${img.offsetWidth/2}px, -${img.offsetHeight/2}px)`; ``` 3. **交互式操作**:在实际...

    JS使用百分比确定图标坐标点击事件Demo

    在JavaScript中,我们可以使用`offsetWidth`和`offsetHeight`属性获取元素的宽度和高度,包括内边距和边框。对于百分比坐标,我们将它们乘以图片的对应尺寸来得到像素坐标。 例如,假设图标左上角的坐标是`(x%, y%)...

    JS实现局部放大效果(类似于淘宝商品显示局部放大)

    然后,我们需要编写JavaScript代码(`magnifier.js`)来处理鼠标移动事件,实时更新放大镜内的图像: ```javascript document.getElementById('original').addEventListener('mousemove', function(e) { var img =...

Global site tag (gtag.js) - Google Analytics