offsetXXX和scollXXX的一些操作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth、offsetHeight、offsetTop、offsetLeft</title>
<style>
*{
margin:0px auto;
padding:0px;
}
#div1{
width:400px;
height:400px;
overflow-y:scroll;
border:1px solid #F60;
position:relative;
}
#div2{
width:340px;
height:600px;
border:1px solid #36C;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
window.onload=function(){
alert( $("div1").offsetHeight ); //402=400(自身的宽度)+2(左右边框)
alert( $("div2").offsetHeight ); //602=600+2
alert( $("div1").offsetWidth ); //402=400+2
alert( $("div2").offsetWidth ); //342=340+2
alert( $("div1").offsetTop ); //0 顶部到页面顶部的距离
alert( $("div2").offsetTop ); //1 距离div顶部的距离 1 就是那一个像素的边框
alert( $("div1").offsetLeft ); //599 左边距离页面最左边的距离
alert( $("div2").offsetLeft ); //21 距离div1左边的距离
$("div1").scrollTop+=10;
alert( $("div1").scrollHeight ); //1217 实际内容的高度
alert( $("div2").scrollHeight ); //1216 实际内容高度
alert( $("div1").scrollWidth ); //383 实际内容的宽度减去滚动条所占的宽度
alert( $("div2").scrollWidth ); //340 实际内容高度
alert( $("div1").scrollTop ); //10 卷进去的高度
alert( $("div2").scrollTop ); //0
alert( $("div1").scrollLeft ); //0
alert( $("div2").scrollLeft ); //0
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
<p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
</div>
</div>
<p>offsetHeight：返回元素定义时的高度，以像素为单位,包含内边距，不包括外边距。</p>
<p>offsetWidth：返回元素定义时的宽度，以像素为单位,包含内边距，不包括外边距。</p>
<p>offsetLeft：返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。注意这里子div内边距是不会影响到offsetLeft。
<p>offsetTop：返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。</p>
<p>scrollHeight：返回元素实际的高度，以像素为单位。</p>
<p>scrollWdith：返回元素实际的宽度，以像素为单位。</p>
<p>scrolltop：返回已经滚动到元素的上边界的像素数。只有在元素有滚动条的时候，这些像素才有用。如果不拖动滚动条，默认的值为0</p>
<p>scrollLeft：返回已经滚动到元素的左边界的像素数。只有在元素有滚动条的时候，这些像素才有用。如果不拖动滚动条，默认的值为0</p>
</body>
</html>
offsetXXX和scollXXX的一些操作的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- Sql Server系列：分区表操作
1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...
- C# ini文件操作【源码下载】
介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）
前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...
- 如何在高并发环境下设计出无锁的数据库操作（Java版本）
一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...
- 【翻译】MongoDB指南/CRUD操作（四）
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...
- 【翻译】MongoDB指南/CRUD操作（三）
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...
随机推荐
- JavaScript高级程序设计：第四章
变量.作用域和内存问题 1.ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值指的是有多个值构成的对象. 2.动态的属性:定义一个基 ...
- hdu_5695_Gym Class(拓扑排序)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5695 题意:中文题,不解释 题解:逆向拓扑字典序就行 #include<cstdio> # ...
- 解决Xcode 9.2系统真机测试时出现 could not find developer disk image问题
解决Xcode在ipad/iphone 9.2 系统真机测试时出现could not find developer disk image问题 第一种方法:拷贝这个文件(http://download. ...
- MVC 项目中又一新方法实现依懒注入 （AutoFac）
详情请查看:http://docs.autofac.org/en/latest/integration/mvc.html#quick-start
- Boost的VS开发环境搭建
1. 下载并解压Boost C++ Libs 下载地址: SourceForge:http://sourceforge.net/projects/boost/files/boost/1.48.0/ B ...
- 转 excel表怎么自动分列
http://jingyan.baidu.com/article/656db918fc3501e380249c53.html
- 初学.net 网页打开过程
一个网页打开的过程 1.进入控制器里的方法里 控制器的命名必须以Controll结尾前面的名字要和view层的命名一致 2.控制器完了以后 就进入view层对应的视图里 3.视图里调用model ...
- OpenGL ES一些函数详解（一）
glLoadIdentity和glMultMatrix glLoadIdentity的作用是将当前模型视图矩阵转换为单位矩阵(行数和列数相同的矩阵,并且矩阵的左上角至右下角的连线上的元素都为1,其 ...
- OpenGL—Android 开机动画源码分析一
.1 Android开机动画实现方式目前实现Android开机动画的方式主要是逐帧动画和OpenGL动画. ?逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的 ...
- Oulipo HDU 1686 KMP模板
题目大意:求模式串在主串中的出现次数. 题目思路:KMP模板题 #include<iostream> #include<algorithm> #include<cstri ...