- 浏览: 1499070 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (798)
- struts2 (42)
- servlet (20)
- quartz (4)
- jquery & ajax (24)
- tomcat (5)
- javascript (15)
- struts1 (8)
- 搜索关键字及链接 (3)
- fckeditor (3)
- Apache (5)
- spring (22)
- linux (3)
- 企业应用 (8)
- 综合应用 (13)
- 服务器 (2)
- 数据库 (85)
- 性能调优 (21)
- 网络应用 (15)
- 缓存技术 (8)
- 设计模式 (39)
- 面试题 (7)
- 程序人生&前辈程序员 (29)
- java基础 (59)
- hibernate (75)
- log4j (4)
- http (11)
- 架构设计 (28)
- 网页设计 (12)
- java邮件 (4)
- 相关工具 (11)
- ognl (7)
- 工作笔记 (18)
- 知识面扩展 (12)
- oracle异常 (1)
- 正则表达式 (2)
- java异常 (5)
- 项目实践&管理 (1)
- 专业术语 (11)
- 网站参考 (1)
- 论坛话题 (2)
- web应用 (11)
- cxf&webservice (22)
- freemarker (3)
- 开源项目 (9)
- eos (1)
- ibatis (6)
- 自定义标签 (3)
- jsp (3)
- 内部非公开文档(注意:保存为草稿) (0)
- 国内外知名企业 (2)
- 网店 (3)
- 分页 (1)
- 消费者习惯 (2)
- 每日关注 (1)
- 商业信息 (18)
- 关注商业网站 (1)
- 生活常识 (3)
- 新闻 (2)
- xml&JSON (5)
- solaris (1)
- apache.common (3)
- BLOB/CLOB (1)
- lucene (2)
- JMS (14)
- 社会进程 (8)
- SSH扩展 (2)
- 消费心理 (1)
- 珠三角 (1)
- 设计文档 (1)
- XWork&webwork (1)
- 软件工程 (3)
- 数据库及链接 (1)
- RMI (2)
- 国内外知名企业&人物 (1)
最新评论
-
司c马:
简介易懂、
OutputStream和InputStream的区别 -
在世界的中心呼喚愛:
解决我的问题
Java获取客户端的真实IP地址 -
bo_hai:
都是些基本的概念呀!
SSO -
tian_4238:
哥们,你也是搞水利这块的吧。
巧用SQLQuery中的addScalar -
loveEVERYday:
java.util.Date、java.sql.Date、java.sql.Time、java.sql.Timestamp小结
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
发表评论
-
20 个非常有用的jQuery 工具提示插件
2011-09-05 10:16 1107http://www.oschina.net/news/210 ... -
55 个 jQuery 表单插件
2011-08-29 14:46 1210http://www.oschina.net/news/208 ... -
jquery(百科解释)
2011-08-04 17:08 1173Jquery是继prototype之后又一个优秀的Javasc ... -
常用jquery方法大全
2011-07-18 14:17 3常用jquery方法大全.docx -
几种流行的AJAX框架对比:Jquery,Mootools,Dojo,ExtJs,Dwr
2011-07-06 11:34 1855Ajaxian在2007年底对Ajax工具进行了调查,部分调查 ... -
Web前端开发工程师必读的15个设计博客
2011-03-01 18:01 1345http://sd.csdn.net/a/20110301/2 ... -
jquery-web素材
2011-01-21 14:33 1214http://www.htmldrive.net -
Web设计师值得收藏的10个jQuery特效
2010-12-28 10:43 1547jQuery已经不是什么新鲜的事儿,以前总把它认为是非 ... -
反向ajax
2010-12-17 17:49 1276http://192.168.17.114:8080/dwr/ ... -
$.ready()
2010-12-06 16:40 751$(document).ready(function(){ ... -
JQuery中each()的使用方法说明
2010-12-03 11:02 1707JQuery中的each函数在1.3.2的官方文档中的描述如下 ... -
flot
2010-11-29 22:12 1616flot 是一个基本于Jquery的开源Javascript库 ... -
Jquery Messager右下角弹出消息插件
2010-11-29 17:38 2301http://www.94this.com.cn/myCode ... -
JS制作网页的FISHEYE效果
2010-11-03 11:30 1430http://d.download.csdn.net/down ... -
常用jquery方法大全
2010-09-29 11:48 1705更详细的见附件 jQuery中常用的函数方法总结 j ... -
slideup()和slideDown()方法的使用
2010-09-17 10:21 2954最近比较闲,并且前段时间因为一个JQuery的问题卡的很是头疼 ... -
jQuery中的Ajax几种请求方法
2010-08-09 14:04 1975jQuery确实是一个挺好的轻量级的JS框架,能帮助我 ... -
通过jquery实现ajax调用
2010-08-06 16:12 1588要素:struts1 一、 1、test.jsp < ... -
相关知识
2010-08-05 16:17 13071、英文指南http://www.visualjquery.c ... -
ajax 回调 多浏览器
2010-08-05 10:34 1275var xmlHttp; function get ...
相关推荐
在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前,我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...
总的来说,`clientHeight`、`offsetHeight`和`scrollHeight`是JavaScript中处理元素尺寸的重要工具,它们在网页布局、响应式设计、滚动事件处理等方面起着核心作用。熟练掌握它们的用法,是每个前端开发者必备的技能...
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中,offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的,它们都是关于位置定位...
offsetHeight和offsetWidth属性返回元素的外部高度和宽度,包括元素的垂直边框(border)、水平方向的内边距(padding)、以及元素的content部分的尺寸,但不包括外边距(margin)。 #### 重要概念 - **...
`offsetHeight` 是一个非常重要的 JavaScript 属性,它用于获取一个元素的总高度,包括内边距、边框,但不包括外边距。然而,在某些特定情况下,尤其是在页面加载(OnLoad)事件中尝试获取 `offsetHeight` 时,可能...
在JavaScript中,`...总的来说,理解和掌握`clientHeight`、`offsetHeight`和`scrollHeight`的差异是进行JavaScript页面交互和布局优化的基础,它们提供了对网页内容可视部分、总尺寸以及可滚动部分的精确控制。
### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中,处理页面布局和滚动效果时经常会用到一些DOM属性,如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...
在JavaScript中,DOM元素的尺寸和位置是通过一系列属性来获取的,如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释: 1. **clientWidth...
### JavaScript 实现商品放大镜效果 #### 知识点概览 1. **HTML 结构设计**:构建页面布局及元素。 2. **CSS 样式设置**:定义样式及响应用户交互时的视觉变化。 3. **JavaScript 事件监听与处理**:实现鼠标移动时...
- **定义**:`offsetHeight` 和 `offsetWidth` 属性返回元素的高度和宽度,包括内边距(padding)、边框(border),但不包括外边距(margin)。 - **示例**: ```javascript var div1 = document....
在JavaScript编程中,实现购物网站的放大镜功能是一项常见的需求,尤其在电子商务网站上,它能为用户提供更直观的产品细节视图。以下是如何利用JavaScript来实现这一功能的详细步骤: 首先,我们需要创建HTML布局,...
【JavaScript源代码】原生JS实现京东查看商品点击放大 在网页设计中,商品展示时经常需要实现一种功能,即用户在浏览商品图片时,当鼠标移入图片,图片会放大并显示在一个独立的区域,同时有一个半透明的遮罩层跟随...
在JavaScript(JS)中,获取和操作元素的宽度与高度是常见的需求,特别是在网页动态布局、用户交互以及响应式设计中。本主题将深入探讨如何使用JavaScript处理元素的宽度和高度,以及相关的尺寸句柄。 首先,我们有...
首先,需要获取屏幕的宽高,可以使用 `document.body.offsetHeight` 和 `document.body.offsetWidth` 获取当前屏幕的宽高。然后,需要确定哪些元素是绝对位置固定的,哪些元素是相对位置固定的,哪些元素的宽高是...
本篇文章将详细讲解如何使用JavaScript(JS)实现这种网页图片放大镜特效。 首先,我们需要准备HTML结构。在这个例子中,我们创建了一个包含两个图片的无序列表(`<ul>`)。每个图片(`<img>`)都被包裹在一个浮动...
很详细的解说了弹弹球的原理,我给的注释很多很详细,便于大家理解。 代码内的注释详细解说了距离...可以很清晰得看到offsetWidth,offsetHeight,document.body.clientWidth,document.clientHeight 这4个属性的用法。
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. **交互式操作**:在实际...
在JavaScript中,我们可以使用`offsetWidth`和`offsetHeight`属性获取元素的宽度和高度,包括内边距和边框。对于百分比坐标,我们将它们乘以图片的对应尺寸来得到像素坐标。 例如,假设图标左上角的坐标是`(x%, y%)...
然后,我们需要编写JavaScript代码(`magnifier.js`)来处理鼠标移动事件,实时更新放大镜内的图像: ```javascript document.getElementById('original').addEventListener('mousemove', function(e) { var img =...