<!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. VMware中Ubuntu 14.04出现Unknown Display问题解决

    如需转载请标明出处:http://blog.csdn.net/itas109 QQ技术交流群:129518033 今天安装完Ubuntu 14.04后,在虚拟机中显示不全,本来调节一下屏幕分辨率就可以 ...

  2. BFS and Queue

    BFS (Bridth First Search) can be implemented by a queue. Procedure is like this: (Q is Queue) 1, Put ...

  3. OC画笔CGContextRef

    1.画线 CGContextRef context = UIGraphicsGetCurrentContext();//context相当于画布 CGContextSetStrokeColorWith ...

  4. 客户端 HttpUtils.java

    package com.http.post; import java.io.ByteArrayOutputStream; import java.io.IOException; import java ...

  5. htaccess 实现网址缩短

    访问 :app.xxx.com/a 解析到:app.xxx.com/index.php/app/a <IfModule mod_rewrite.c> RewriteEngine on Re ...

  6. ORACLE里锁有以下几种模式,v$locked_object,locked_mode【转】

    ORACLE里锁有以下几种模式:0:none1:null 空2:Row-S 行共享(RS):共享表锁,sub share 3:Row-X 行独占(RX):用于行的修改,sub exclusive 4: ...

  7. QML中的ExclusiveGroup

    Exclusive这个单词在高中应该都学过,是互斥的意思.如果你没有上过或者还没有上到高中,那你非常棒,计算机领域的大师很多都是这么起步的. ExclusiveGroup顾名思义就是互斥分组,效果很明 ...

  8. ios屏幕

    设备 屏幕尺寸 分辨率(pt) Reader 分辨率(px) 渲染后 PPI iPhone 3GS 3.5吋 320x480 @1x 320x480   163 iPhone 4/4s 3.5吋 32 ...

  9. CREATE SCHEMA

    CREATE SCHEMA 创建一个架构,即命名空间,在这个空间中可以进一步定义包含表.视图和权限定义等对象. 语法 CREATE SCHEMA AUTHORIZATION owner    [ &l ...

  10. nginx+php-fpm 的配置下，php的错误日志

    发现php 运行错误时,浏览器的网页上并没有输出php的错误日志.那php的错误日志在哪里呢? 发现在 /var/log/nginx/error.log文件中. 怎么样才能在浏览器的网页中输出php的 ...