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 ...
随机推荐
- Mysql常用命令记录
-- 导出数据库: mysqldump -u user_name -p database_name > import_file.sql -- 执行脚本 source database.sql
- mysql-5.7.12-winx64.zip Windows (x86, 64-bit), ZIP Archive版免安装配置
1.下载免安装版压缩包 下载地址:http://dev.mysql.com/downloads/mysql/ 选择符合你的操作系统的版本,点击download进入下载页面 不用注册也可以点击下载连接进 ...
- js中几个容易混淆的概念
1. var name = "The Window";var object = {name : "My Object",getName: function(){ ...
- 修补--Redis未授权访问漏洞
--------------------------------阿里云解决方案----------------------------------- 一.漏洞描述 Redis因配置不当可以导致未授权访 ...
- SpringMVC整合极光推送报错ClassNotFound
问题: 今天在做后台和极光整合的过程中,将极光部分代码整合到Dao层,在启动项目的过程中总是报错,classNotFund cn/jpush/api/push/xxxx 极光官方文档: http:// ...
- Codeforces 509F Progress Monitoring
http://codeforces.com/problemset/problem/509/F 题目大意:给出一个遍历树的程序的输出的遍历顺序b序列,问可能的树的形态有多少种. 思路:记忆化搜索 其中我 ...
- LeetCode_Valid Palindrome
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- Qt try catch排错历程——C++的异常对除零不起作用
前几天从网上下载了一份网友用Qt写的作品,打开时发现它是用VS2010写的,而我机器上只有VS2008,倒腾了半天最终没能用VS2008打开,而自己又不想再安装VS2010.还好在工程中有.pro文件 ...
- 《Programming WPF》翻译 第3章 1.什么是控件
原文:<Programming WPF>翻译 第3章 1.什么是控件 对于一个应用程序而言,控件是搭建用户界面的积木.它们具备交互式的特征,例如文本框.按钮以及列表框.尽管如此,WPF还有 ...
- python 程序穩定性閒談－續集
前文再續,書接上一回.上次總結python錯誤碼返回與異常機制共用的一些原則,毫無疑問地,仍會出現程序不穩定的現象(好吧,可能是我個人能力問題).在公司做的一個項目中,出現了因爲使用外部模塊造成pyt ...