一、offsetWidth:元素的宽度,包括边框,内容,内边距。

二、offsetHeight:元素的高度,包括边框,内容,内边距。

三、offsetLeft:元素的X坐标(相对于最近已定位的祖先元素,如果没有则是窗口)。

四、offsetTop:元素的Y坐标(相对于最近已定位的祖先元素,如果没有则是窗口)。

五、clientWidth:元素的宽度,不包括边框,只包括内容和内边距。

六、clientHeight:元素的高度,不包含边框,只包括内容和内边距。

七、clientLeft:元素内边距的外边缘与外边框的水平距离(也就是左边框的宽度),如果有滚动条时,会包含滚动条的宽度。

八、clientTop:元素的内边距的外边缘与外边框的垂直距离(也就是上边距的宽度),如果有滚动条时,会包含滚动条的宽度。

示例:HTML代码:

    <div id="div1" style="width:500px;height:300px;margin-left:100px;margin-top:100px;  border:5px solid red;padding:3px;">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
<p id="p3">我是第三个P</p>
<p id="p4">我是第四个P</p>
</div>

    javascript代码:

        window.onload = function () {
var div1 = document.getElementById("div1"); document.getElementById("p1").textContent = "div1的offsetWidth是:" + div1.offsetWidth;
document.getElementById("p2").textContent = "div1的offsetHeight是:" + div1.offsetHeight;
document.getElementById("p1").textContent += "; div1的offsetWidth是:" + div1.clientWidth;
document.getElementById("p2").textContent += "; div1的offsetHeight是:" + div1.clientHeight; document.getElementById("p3").textContent = "div1的offsetLeft是:" + div1.offsetLeft;
document.getElementById("p4").textContent = "div1的offsetTop是:" + div1.offsetTop;
document.getElementById("p3").textContent += "; div1的clientLeft是:" + div1.clientLeft;
document.getElementById("p4").textContent += " ; div1的clientTop是:" + div1.clientTop;
}

  实际效果如图所示:

            

九、scrollWidth  元素的内容区域加上内边距再加上水平溢出内容的尺寸。如果没有溢出则与clientWidth一样。也就是说scrollWidth-clientWidth就是溢出的尺寸。

十、scrollHeight  元素的内容区域加上内边距再加上垂直溢出内容的尺寸。如果没有溢出泽宇clientHeight一样。

十一、scrollLeft  当元素有滚动条时,此属性可以读取和设置滚动条的水平位置。

十二、scrollTop  当元素有滚动条时,此属性可以读取和设置滚动条的垂直位置。

HTML代码:

    <div id="div1" style="width:500px;height:300px;margin-left:100px;margin-top:100px;  
                border:5px solid red;padding:3px; overflow:scroll;">
<div id="div2" style="width:700px;height:500px;"> </div>
<input type="button" value="查看scroll" onclick="fun1()" />
</div>

javascript代码:

function fun1() {
var div1 = document.getElementById("div1")
alert("scrollWidth:" + div1.scrollWidth + ";scrollTop:" + div1.scrollTop + ";scrollLeft" + div1.scrollWidth + ";scrollTop" + div1.scrollTop);
}

效果如图:

          

十三、offsetParent  返回最近已定位的父元素。

  HTML代码:

    <div id="div1" class="div1Class" style="position:relative;">
<div id="div2">
</div>
</div>

  javascript代码:

        window.onload = function () {
var div2 = document.getElementById("div2")
alert(div2.offsetParent.className);
}

  执行结果:弹出   div1Class  也就是说,div2最近已定位的父元素的class="div1Class"

javascript之尺寸,位置,溢出的更多相关文章

  1. Android View各种尺寸位置相关的方法探究

    Android View各种尺寸位置相关的方法探究 本来想做一个View间的碰撞检测之类的. 动手做了才发现不是想象的那么简单. 首先,写好了碰撞检测的工具类如下: package com.mengd ...

  2. javascript代码放置位置对程序的影响

    在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响.由于 H ...

  3. JS基础 复习: Javascript的书写位置

    爱创课堂JS基础 复习: Javascript的书写位置复习 js书写位置:body标签的最底部.实际工作中使用书写在head标签内一对script标签里.alert()弹出框.console.log ...

  4. javascript获取窗口位置、绝对位置、事件位置等

    有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑, ...

  5. JavaScript代码存放位置

    JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...

  6. javascript 获取页面尺寸/位置

    ************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的 ...

  7. JavaScript中尺寸、坐标

    测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '&l ...

  8. 嵌入javascript脚本的位置

    JavaScript脚本可以放在HTML文档任何需要的位置.一般来说,可以在<head>与</head>.<body>与</body>标记对之间按需要放 ...

  9. JavaScript中的位置屬性

    屏幕中的位置(直接使用,無需前綴): screenLeft.screenTop:除了火狐都支持 screenX.screenY: 窗口的大小(谷歌的inner=outer,直接使用,無需前綴): in ...

随机推荐

  1. Windows 8.1 正式版 MSDN第二版 官方简体中文/英文版 (专业版/企业版)

    说明:文件名cn开头的是简中版文件名en开头的是英文版文件名含x64的为64位版本文件名含x86的为32位版本文件名含enterprise的为企业版文件名含pro_vl的为专业批量授权版文件名不含en ...

  2. ActionResult解析

    原文地址:http://blog.csdn.net/gulijiang2008/article/details/7642213 ActionResult是一个抽象类, 在Action中返回的都是其派生 ...

  3. UML建模工具-火龙果软件

     官网地址:http://code.uml.com.cn/index.asp     Bridge桥梁模式    (待逆向) 桥梁模式,通过增加一个类,将抽象部分与它的实现部分分离,使它们都可以独立 ...

  4. Array vs Linked List

    Access: Random / Sequential 1. Array element can be randomly accessed using index 2. Random access f ...

  5. SPRING+JNDI+C3P0 in tomcat6

    Tomcat 中Jndi是使用Tomcat自带的连接池,由于客户要求,抛弃Tomcat自带的连接池.使用c3p0 .经过几个小时调试,解决方案如下: 环境:Tomcat 6 下面来看Jndi 与 c3 ...

  6. handsontable常规配置的中文API

    常规配置: 1.固定行列位置 fixedRowsTop:行数 //固定顶部多少行不能垂直滚动 fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动 2.拖拽行头或列头改变行或列的大小 ...

  7. Oracle sga、pga介绍改动

    oracle推荐OLTP(on-line TransactionProcessing)系统oracle占系统总内存的80%,然后再分配80%给SGA,20%给PGA.也就是 SGA=system_to ...

  8. android CMWAP, CMNET有何差别

    什么是CMNET,什么是CMWAP? 答:CMWAP和CMNET仅仅是中国移动为其划分的两个GPRS接入方式.中国移动对CMWAP作了一定的限制,主要表如今CMWAP接入时仅仅能訪问GPRS网络内的I ...

  9. Velocity知识点总结

    Velocity知识点总结 1. 变量 (1)变量的定义: #set($name = "hello") 说明:velocity中变量是弱类型的. 当使用#set 指令时,括在双引號 ...

  10. 涂抹Oracle笔记1-创建数据库及配置监听程序

    一.安装ORACLE数据库软件及创建实例OLTP:online transaction processing 指那些短事务,高并发,读写频繁的数据库系统.--DB_BLOCK_SIZE通常设置较小.O ...