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 ...
随机推荐
- 2 读取solr下的索引文件（lucene文件）
import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnaly ...
- SMBUS（IIC）总线
1.SPI和IIC一般都作为板上通信,UART.SMBUS和USB一般都作为板间通信. 其中SMBUS是参考IIC制定出来的眼生病,两者很像. 2.SMBUS的I/O接口是由两条线组成的双向串行总线. ...
- Linux-统一事件源
概念: 信号时一种异步事件:信号处理函数和程序的主循环式两条不同的执行路线,信号处理函数需要尽可能快地执行完毕,以确保该信号不被屏蔽.(为了避免一些竞态条件,信号在处理期间,系统不会再次出发它)太久. ...
- No-args constructor for class does not exist. Register an InstanceCreator with G
有时候我们在使用Googel官方的json解析包时,如果自己的实体类中出现代参的构造函数.在1.4的jar中,如果类造型中有参数,就会调用不了无参构造器,(如:HashMap的构造器就会有参数) 参考 ...
- http_load压力测试
http_load是基于linux平台的性能测试工具,它体积非常小,仅100KB.它以并行复用的方式运行,可以测试web服务器的吞吐量与负载. 一.安装http_load A.进入/usr/local ...
- AngularJS中的控制器示例_3
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- java生产者消费者并发协作
随着职务转变,代码荒废很久了,很多时间都是在沟通需求,作为一名技术员,不写代码就感觉是在自废武功,慢慢颓废了很多,今天重新回顾了下JAVA线程知识,基础知识就不梳理了,网上也很多,主要关键几个状态位( ...
- 可以让javascript加快的脚本（收藏了）
<?php ob_start('ob_gzhandler'); header("Cache-Control: public"); h ...
- 安装Oracle10g on RedHat as 4 64bit（摘）
一.安装前的配置 1.修改RH版本 vi /etc/redhat-release Red Hat Enterprise Linux AS release 3 (Taroon Update 3) 2. ...
- Linux Shell Scripting Tutorial (LSST) v2.0
http://bash.cyberciti.biz/wiki/index.php?title=Main_Page