<!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的一些操作的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. Sql Server系列：分区表操作

    1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...

  3. C# ini文件操作【源码下载】

    介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...

  4. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  7. 如何在高并发环境下设计出无锁的数据库操作（Java版本）

    一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...

  8. 【翻译】MongoDB指南/CRUD操作（四）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...

  9. 【翻译】MongoDB指南/CRUD操作（三）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...

随机推荐

  1. WHM使用手册by lin

    WebHost Manager 11使用手册(WHM使用手册) 本手册翻译自cpanel官方文档. 本翻译中文版本版权归美国主机侦探所有,未经允许,禁止复制. Overview(概述) 本用户手册主要 ...

  2. YII2 请求（request）

    请求 一个应用的请求是用 yii\web\Request 对象来表示的,该对象提供了诸如 请求参数(译者注:通常是GET参数或者POST参数).HTTP头.cookies等信息. 默认情况下,对于一个 ...

  3. <context:annotation-config/>

    转自:Spring <context:annotation-config/> 解说 在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-c ...

  4. log4cxx 使用代码进行配置

    (1)官网的一个例子 #include <log4cxx/logger.h> #include <log4cxx/helpers/pool.h> #include <lo ...

  5. chrome 常用快捷操作

    Chrome窗口和标签页快捷键: Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件,在谷歌浏览器中打开计算机上的文件 ...

  6. c语言编译命令

    第14章 预处理及用户配置文件 • 预处理命令通常在程序编译时进行一些符号处 理,其并不执行具体的硬件操作.C51语言中的预 处理命令主要有宏定义指令.文件包指令和条 件编译指令,还有其他一些调试时使 ...

  7. Golang：测试map是否存在

    请看这个url:http://www.du52.com/text.php?id=561 if v, ok := m1["a"]; ok { fmt.Println(v) } els ...

  8. 二分查找（Binary Search)的基本实现

    关于二分查找法二分查找法主要是解决在"一堆数中找出指定的数"这类问题. 而想要应用二分查找法,这"一堆数"必须有一下特征: 1,存储在数组中2,有序排列 所以如 ...

  9. 克隆虚拟机系统整个文件快照，然后另起建立该系统，产生的IP地址冲突解决办法

    进入克隆后的文件系统 cd /etc/sysconfig/network-scripts/ cp ifcfg-eth0  ifcfg-eth1 vim ifcfg-eth1   #修改其中的文件内容 ...

  10. Shell脚本，自动化发布tomcat项目【转】

    Shell脚本,自动化发布tomcat项目脚本. 1. vko2c_auto_build_by_scp.sh 文件内容: #---------------------start------------ ...