DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)
[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.......)的更多相关文章
- 第一百一十七节，JavaScript，DOM元素尺寸和位置
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1. ...
- DOM元素尺寸和位置
一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...
- JavaScript(第二十一天)【DOM元素尺寸和位置】
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 ...
- JS-学习－DOM元素尺寸和位置
一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box'); // 获得元素; box.style. ...
- 深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
- DOM系列---DOM获取尺寸和位置
内容提纲: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本篇我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式. 一．获取元素CSS大小 1.通过style获取 ...
- JavaScript--DOM元素尺寸和位置(22)
一 获取元素的CSS大小 1.通过style内联获取元素的大小 var box = document.getElementById('box'); // 获得元素; box.style.width; ...
- 关于clientWidth scrollWidth offsetWidth的理解
clientWidth:元素可见区域的宽度 clientWidth=padding+width-滚动条 scrollWidth:元素实际内容的宽度 scrollWidth=padding+width ...
- jacascript 判断元素尺寸和位置
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! getBoundingClientRect() 判断一个元素的尺寸和位置是简单的方法就是使用 obj.ge ...
随机推荐
- arry()数组的理解及api的使用（一）
我们想要了解数组,首先就要先要了解到什么是数据结构,所谓的数据结构就是把数据与数据见的关系按照特定的结构来保存.设计合理的数据结构是解决问题的前提.了解了数据结构后我们下面来数组的定义:数组(arra ...
- 给定范围内产生N个不同的随机数
void RandNumbs(int nLimts, int result[], int n)//给定范围内产生n个不同随机数(1-nLimts),并存储到result中 { int nNum = 0 ...
- 无法捕获的异常：MissingMethodException
今天一个同事发布站点,一直出现一些稀奇古怪的问题,各种各样的异常都有,根据这些异常去排查代码,都完全正常,很让人郁闷,因为代码里可能出异常的地方都记录了程序日志,所以他一直没去排查系统里的“应用程序日 ...
- 慕课linux学习笔记（九）常用命令（6）
关机与重启命令 Shutdown [选项] 时间 -c 取消前一个关机命令 -h 关机 -r 重启 Shutdown -r now 其他关机命令 Halt Poweroff Init 0 其他重启命令 ...
- CentoS7装机
按delete进入BIOS 选择UEFI 网上关于CentOS 7 的安装教程挺多的,但在前期的引导配置上很多都没有写清楚,让人很郁闷,以致于昨天安装的时候总是到不了安装界面.经过一番胡乱倒腾,终于找 ...
- 大转盘Demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- ibatis 更改resultmap后 java.sql.SQLException: Column 'del_status' not found.
当在resultmap中增加字段后,查询语句也必须增加相应字段,否则会报错, java.sql.SQLException: Column 'del_status' not found. 因为查询结果与 ...
- Python函数小结（2）-- 装饰器、 lambda
本篇依然是一篇学习笔记,文章的结构首先讲装饰器,然后讲lambda表达式.装饰器内容较多,先简要介绍了装饰器语法,之后详细介绍理解和使用不带参数装饰器时应当注意到的一些细节,然后实现了一个简单的缓存装 ...
- Codeforces 474D Flowers
http://codeforces.com/problemset/problem/474/D 思路:F[i]=F[i-1]+(i>=K)F[i-k] #include<cstdio> ...
- XJOI网上同步训练DAY2 T2
[问题描述] 火车司机出秦川跳蚤国王下江南共价大爷游长沙.每个周末勤劳的共价大爷都会开车游历长沙市. 长沙市的交通线路可以抽象成为一个