[1] slientWidth 和 sclientHeight

slientWidth：获取的是可视宽度　　　

slientHeight:获取的是可视高度　　　

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

　　</body>

</html>

【1】slientWidth：34px ; slientHeight: 34px 因为client他的宽度和高度都没有包括滚动条，所以会减去滚动条的宽高度；

【2】当div内的内容溢出(内容量超过div大小)的时候，client获取的仍然是34px； 因为他只是获取到可视内容的高度

//----------------------------------------------------------------------------------------------------------------------------------------------

[2]scrollWidth 和scrollHight

scrollWidth：获取的是实际宽度

scrollHight：获取的是实际的高度

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

　　</body>

</html>

【1】scrollWidth：34px ; scrollHeight: 34px 因为scroll他的宽度和高度都没有包括滚动条，所以会减去滚动条的宽高度；【和slient相同】

【2】当div内的内容溢出(内容量超过div大小)的时候，scroll获取的是>34px； 因为他会获取到内容的实际高度

//----------------------------------------------------------------------------------------------------------------------------------------------

[3]scrollTop 和scrollLeft

scrollTop：获取到滚动条当前的高度

scrollLeft：获取到滚动条当前距离最左边的距离

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

　　</body>

</html>

【1】当内容超出div大小的时候，就会出现滚动条，而这个滚动条的高度就取决滚动条最顶端的当前位置的距离

//------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[4]offsetWidth 和offsetHeight

offsetWidth：获取到可视宽度

offsetHeight：获取到可视高度

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

　　</body>

</html>

【1】offsetWidth：50px ; offsetHeight: 50px offset的宽度和高度都是包含滚动条的高度和宽度的【和client,scroll 不同】

【2】当内容溢出的时候offset获取到的还是50px ，因为他获取的是可视高度【和client相同】

//------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[3]offsetTop 和offsetLeft

offsetTop：获取到的是自身与参照对象的高度距离

offsetLeft：获取到的是自身与参照对象的左距离

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:100px;

　　　　　　　　height:100px;

　　　　　　　　position:relative;
　　　　　　}

　　　　　　.div2{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　position:absolute;　　　　　　//绝对定位

　　　　　　　　top:20px;

　　　　　　　　left:30px;

　　　　}

　　　　</style>

　　　　<script>

　　　　　　var odiv=document.getElementById('div1');

　　　　　　var odiv1=document.getElementById('div2');

　　　　　　alert(div1.offsetLeft);　　　　//30

　　　　　　alert(div1.offsetTop);　　　　//20

　　　　</script>

　　</head>

　　<body>

　　　　<div id="div" class="div1">

　　　　　　<div id="div1" class="div2"></div>
　　　　</div>

　　</body>

</html>

【1】div是div1的父元素，所以div1是div 的参照对象

offsetTop：20px offLeft:30px

//------------------------------------------------------------------------------------------------------------

offsetParent 可以得出offset的父元素

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)的更多相关文章

  1. 第一百一十七节，JavaScript，DOM元素尺寸和位置

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1. ...

  2. DOM元素尺寸和位置

    一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...

  3. JavaScript(第二十一天)【DOM元素尺寸和位置】

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解.   一．获取元素CSS大小 ...

  4. JS-学习－DOM元素尺寸和位置

    一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box');    // 获得元素;     box.style. ...

  5. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  6. DOM系列---DOM获取尺寸和位置

    内容提纲: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本篇我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式. 一．获取元素CSS大小 1.通过style获取 ...

  7. JavaScript--DOM元素尺寸和位置(22)

    一 获取元素的CSS大小 1.通过style内联获取元素的大小 var box = document.getElementById('box'); // 获得元素; box.style.width; ...

  8. 关于clientWidth scrollWidth offsetWidth的理解

    clientWidth:元素可见区域的宽度  clientWidth=padding+width-滚动条 scrollWidth:元素实际内容的宽度 scrollWidth=padding+width ...

  9. jacascript 判断元素尺寸和位置

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! getBoundingClientRect() 判断一个元素的尺寸和位置是简单的方法就是使用 obj.ge ...

随机推荐

  1. 最小生成树prim算法———模板

    codevs.cn 最优布线问题 #include<cstdio>#include<cstring> bool u[101]; int g[101][101],minn[101 ...

  2. Windows下Mysql解压缩版配置安装与卸载

    安装: ①解压Mysql到合适的位置! ②以管理员身份运行命令提示符(cmd),cd C:\Documents and Settings\Administrator\桌面\mysql-5.6.24-w ...

  3. 【干货】.NET开发通用组件发布（一） 介绍

    组件介绍 集合个人和团都开发中遇到的一些通用组件,邮件发送组件.内容采集.CSV数据文件导入工具.日志记录组件.MVC验证登陆组件.MVC分页组件.短信发送组件和强大的Repeate和Repeater ...

  4. AngularJS中的控制器示例

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  5. 算法导论--python--插入排序

    #!/usr/local/python35/bin/python3.5 #### insert sort if __name__=="__main__": var_list=[3, ...

  6. 安装 adobe flash player

    安装方法:     1. 下载Adobe Flash Player:        http://fpdownload.macromedia.com/get/flashplayer/pdc/11.2. ...

  7. ActiveX in QT

    http://doc.qt.io/qt-4.8/activeqt.htmlhttp://doc.qt.io/qt-5/activeqt-index.html

  8. Android setTextColor无效_安卓setTextColor()的参数设置方式

    通过代码setTextColor时.如果color是一个资源文件 会set失败 没有效果 遇到这样的情况有两种解决办法.亲测过.两种都是有效的 一.注解方式 通过在方法上面添加注解解决问题 代码如下 ...

  9. Base64 加密之中文乱码

    ase64编码将二进制数据按照每三个字节转换成四个字节可读字符,编码后的字符长度大约为136.1%.字符范围为 A-Z  a-z  0-9  \  +.但编码后的字符串不太适合使用URL传输,中文加密 ...

  10. 应用程序打包(ipa)

    如果想让用户可以安装ipa, 必须在打包程序的时候说清楚哪一个应用程序(appid)可以安装到哪一台设备上.(UDID). 原理: 要想打包, 告诉苹果, 哪一台电脑可以进行打包 步骤: 让电脑端具备 ...