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 ...
随机推荐
- 控制反转IOC与依赖注入DI【转】
转自:http://my.oschina.net/1pei/blog/492601 一直对控制反转.依赖注入不太明白,看到这篇文章感觉有点懂了,介绍的很详细. 1. IoC理论的背景我们都知道,在采用 ...
- <转> 纸牌屋1-4集分析
原文:http://blog.sina.com.cn/s/blog_b86c61490102v56t.html 第一季第一集 主人公弗兰克的出场,是以对待一只邻家将死之狗的态度展开的,充分显示了主人公 ...
- static说明
1.最基本用法:加static的全局变量或者函数,只能在本文件中使用.可见性只在本文件中. 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说 ...
- node.js + socket.io实现聊天室一
前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...
- 给EcStore商城会员添加推广返利功能
EcStore商城后台应用中心安装“网站推广”应用,会员成为推广员有二种途径:一是后台/推广设置/推广员审核/推广注册模式设为:需注册后审核成为推广员 此模式下前台会员在使用推广前,需要在会员中心申请 ...
- linux运维基础__争取十月前研究的差不多
转来的一编,考虑在十月前研究的差不多 linux运维人员基础 1.很多地方经常会用到的rsync工具 实施几台服务器的同步效果 我们公司就是使用这个工具完成服务器的游戏的服务端和客户端同步,有几个文章 ...
- nyoj-366-D的小L(求全排列)
D的小L 时间限制:4000 ms | 内存限制:65535 KB 难度:2 描述 一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡匡玩但又怕匡匡生气,这时小L给匡匡 ...
- mysql 5.7 内存使用监控
5.7 中的performance_schema 已经有能力监控mysql 的内存使用情况了,对于这一点也是要通过instrument 来实现的,由于内存这一块没有对应的consumer 所以只要 配 ...
- BZOJ3144 切糕
http://www.lydsy.com/JudgeOnline/problem.php?id=3144 思路:如果没有D的限制,那一个竖轴都是一个最小割,每个点向更高的点引一条流量为自己权值的边,那 ...
- Windows资源文件里VarFileInfo的Translation（EXE的语言描述信息）
/* The following line should only be modified for localized versions. */ /* It consists of any numbe ...