<!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. Flask -- 入门

    安装virtualenv 作用:可以为一个项目单独提供一份Python的安装,安全  pip install virtualenv 使用virtualenv为MyProject项目安装Python,并 ...

  2. U盘启动安装Ubuntu

    1.UltraISO制作USB启动盘 2.打开U盘目录下的\syslinux\syslinux.cfg, 将default vesamenu.c32注释为 # default vesamenu.c32

  3. How to set a MySQL root user password in MAC OSX

    https://www.youtube.com/watch?v=sFT9tGL54sI

  4. ThinkPad 禁用 触摸板

    执行 xinput wowk@wowk:~$ xinput ⎡ Virtual core pointer id=2 [master pointer (3)] ⎜ ↳ Virtual core XTES ...

  5. TD缺陷通过excel导入QC11.0缺陷库

    在将TD升级到QC之前,参考了各种升级的方式,但是最终发现用excel导入缺陷到QC库是最简单方便的方法,实施步骤如下:1,首先登陆TD,将缺陷的所有信息显示在界面,然后使用缺陷工具将页面所有缺陷保存 ...

  6. 浅谈h5移动端页面的适配问题

    一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其 ...

  7. Chapter 2 Open Book——16

    By Friday I was perfectly comfortable entering my Biology class, nolonger worried that Edward would ...

  8. 一起来用css画画

    hello,大白来了... <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...

  9. 编辑器phpstrom的快捷键修改

    file->setting-->查找 keymap -->查找 format 格式化代码  ctrl+alt +L appearance-->外观-->显示行号

  10. Python之路：爬虫之urllib库的基本使用和高级使用

    关于爬虫自己一直在看,所以时间太慢,这才第二更,有等不及的小伙伴可以慢慢的品尝了,在看下面的之前,建议先把上一章看一下.以下是关于python的Urllib的基础和高级用法. 1.如何扒下一个网站,用 ...