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 ...
随机推荐
- （三）backbone - API学习 - v0.9.2 与 v1.1.2区别
Backbone.View v0.9.2 中Backbone.View 可以导出对象的options属性, v1.1.2 中去掉该属性,通过如下代码 viewOptions = ['model', ' ...
- Linux设置自启动
启动大致过程:bootloader-->内核-->内核模块-->挂载根文件系统-->init进程 init进程是非内核进程中第一个被启动运行的,因此它的进程编号PID的值总是1 ...
- 搭建lamp环境
虚拟机始终是虚拟机,还是linux用起来舒服得多.话不多说,回到我们的老本行,linux下进行lamp环境搭建吧. 一.安装 1.Apache sudo apt-get install apache2 ...
- php 生成和下载xml文件
方法一 $doc = new DOMDocument('1.0', 'utf-8'); $doc->formatOutput = true; $rootEle = $doc->create ...
- 关于HTML在手机端自适应的一个问题
在写页面的时候 一直以为是自己调节的大小,结果页面跳出来的效果完全不适应手机的尺寸和宽度 其实主要是因为head头中没有放自适应标签导致:下面就让我们来认识一下这款神器吧! 其实主要就是改掉HTML页 ...
- 学习memcached的一个网站
http://www.ibm.com/developerworks/cn/java/j-memcached1/#resources
- Block（一）基础－备
一.概述 Block是C级别的语法和运行时特性.Block比较类似C函数,但是Block比之C函数,其灵活性体现在栈内存.堆内存的引用,我们甚至可以将一个Block作为参数传给其他的函数或者Block ...
- 数据库语句union的总结
select * from ( (select * from user limit 0,3) union (select * from user limit 10,30) ) tmp where ui ...
- 遍历ArrayList与LinkedList,使用FOR与迭代器的区别
网上结论: 如果是链表结构的集合,如LinkedList,则使用迭代器遍历,速度会更快(顺序获取). 如果是数组结构的,如ArrayList,则使用for循环会更快(随机获取) 测试代码: packa ...
- 分布式文件系统glusterfs安装步骤
我的系统是 RHEL5 , 可能环境不一样, 需要安装的第三方依赖不一样啊, 反正大家在安装的过程中缺少什么就去安装什么, 一般都会有提示的. 下载 glusterfs-3.2.0.tar.gz ...