DOM-BOM-EVENT（5）
5.宽、高、位置相关
5.1.clientX/clientY
clientX和clientY表示鼠标在浏览器可视区的坐标位置
<script>
document.onclick = function(ev){
var ev = ev || event
alert("clientX:"+ev.clientX+", clientY:"+ev.clientY)
}
</script>
5.2.pageX/pageY
pageX和pageY表示鼠标在网页文档中的坐标位置，这里需要注意：网页的宽高是可以大于浏览器可视区的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 300px;
height: 2000px;
background-color: #009f95;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
document.onclick = function(ev){
var ev = ev || event
alert("clientX:"+ev.pageX+", clientY:"+ev.pageY)
}
</script>
</body>
</html>
5.3.offsetLeft/offsetTop/offsetWidth/offsetHeight/offsetParent
offsetLeft和offsetTop是相对于定位父级的坐标位置
offsetWidth和offsetHeight是元素实体所占的总宽高，例如：总宽度 = 内容 + padding + border
offsetParent表示定位父级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 400px;
height: 400px;
background-color: #009f95;
position: absolute;
left: 200px;
top:100px;
}
#box-inner{
width: 100px;
height: 100px;
background-color: orangered;
position: absolute;
left: 50px;
top: 50px;
padding: 50px;
}
</style>
</head>
<body style="position:relative">
<div id="box">
<div id="box-inner"></div>
</div>
<script>
var oBoxIner = document.getElementById("box-inner")
var oBox = document.getElementById("box")
document.onclick = function(ev){
var ev = ev || event
// 获取left 和 top偏移量
alert("offsetLeft:"+oBoxIner.offsetLeft+", offsetTop:"+oBoxIner.offsetTop)
// 获取当前元素的宽高, width = 内容宽高+padding+border
alert("offsetWidth:"+oBoxIner.offsetWidth+", offsetHeight:"+oBoxIner.offsetHeight)
// 获取元素的最近的定位父级
console.log("offsetParent:"+oBoxIner.offsetParent)
}
</script>
</body>
</html>
5.4.scrollLeft/scrollTop／scrollWidth/scrollHeight
scrollLeft 和 scrollTop 表示元素滚出去的距离
scrollWidth和scrollHeight 对象的实际内容的宽高，会随对象中内容超过可视区后而变大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 300px;
height: 200px;
border: 5px solid black;
margin: 100px auto;
overflow: auto;
/* box-sizing: border-box; */
}
#box-inner{
width: 450px;
margin: 100px auto;
height: 300px;
border: 1px solid red;
background-color: #009f95
}
</style>
</head>
<body>
<div id="box">
<div id="box-inner"></div>
</div>
<script>
var oBox = document.getElementById("box")
var oBoxInner = document.getElementById("box-inner")
oBox.onclick = function(){
// 顶部滚动距离
alert("scrollTop:"+this.scrollTop+"scrollLeft:"+this.scrollLeft)
alert("scrollWidth:"+this.scrollWidth+",scrollHeight:"+this.scrollHeight)
}
</script>
</body>
</html>
5.5.clientWidth/clientHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 400px;
height: 400px;
background-color: #009f95;
position: absolute;
left: 200px;
top:100px;
}
#box-inner{
width: 100px;
height: 100px;
background-color: orangered;
position: absolute;
left: 50px;
top: 50px;
padding: 50px;
border: 20px solid black;
}
</style>
</head>
<body style="position:relative">
<div id="box">
<div id="box-inner"></div>
</div>
<script>
var oBoxIner = document.getElementById("box-inner")
var oBox = document.getElementById("box")
document.onclick = function(ev){
var ev = ev || event
//元素可视区宽高， 内容+padding 不包括边框
alert("clientWidth:"+oBoxIner.clientWidth+", clientHeight:"+oBoxIner.clientHeight)
}
</script>
</body>
</html>
5.6.总结
offsetWidth／offsetHeight clientWidth/clientHeight scrollWidth/scrollHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 300px;
height: 200px;
border: 5px solid black;
margin: 100px auto;
overflow: auto;
padding: 20px;
}
#box-inner{
width: 450px;
margin: 100px 300px;
height: 300px;
border: 1px solid red;
background-color: #009f95
}
</style>
</head>
<body>
<div id="box">
<div id="box-inner"></div>
</div>
<script>
var oBox = document.getElementById("box")
var oBoxInner = document.getElementById("box-inner")
oBox.onclick = function(){
// 顶部滚动距离
console.log("有滚动条的时候-----》")
console.log("scrollWidth:"+this.scrollWidth)
//offsetWidth
console.log("offsetWidth-----》")
console.log("offsetWith:"+this.offsetWidth)
// clientWidth
console.log("clientWidth-----》")
console.log("clientWidth:"+this.clientWidth)
}
</script>
</body>
</html>
总结： 1. clientWidth和offsetWidth返回的值和内部元素无关，它们两个的区别是，前者返回的值是：width+padding ，后者返回的值是：width+padding+border 2. scrollWidth返回的值和内部的元素有关，它返回的是内部元素实际的宽带，包括margin、padding、border等 等，会随着内部元素所占宽度的增加而增加
5.7.如何获取文档的宽／高？
document.documentElement.scrollWidth/scrollHeight
5.8.如何获取可视区宽／高？
docuement.documentElement.clientWidth document.documentElement.clientHeight
5.9.如何获取页面的滚动距离？
document.documentElement.scrollTop/scrollLeft
螺钉课堂视频课程地址：http://edu.nodeing.com
DOM-BOM-EVENT（5）的更多相关文章
- BOM基础（四）
最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...
- DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- JavaScript DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- c#中的delegate（委托）和event（事件）
c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- DOM学习笔记（二）对象方法与属性
所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...
- DOM之事件（一）
DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...
- DOM的概念（1）
什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...
- JavaScript DOM学习总结（一）
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- jchdl - RTL Block
https://mp.weixin.qq.com/s/pR6b6i98P9dRU8bhZkKaww 观察Verilog代码可以发现,对逻辑的描述中都是assign和always代码块.这正对应了硬 ...
- 关于vue 中elementui 的表格边框隐藏
最近写到一个项目需要实现边框隐藏,网上查找了好多笔记,回答都好含糊不清.为此,记录一下自己的实现方法: 需求: 要将如下表格边框去除 效果图: ...
- Java实现 LeetCode 391 完美矩形
391. 完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 ...
- Java实现 蓝桥杯 算法训练 字符串合并
试题 算法训练 字符串合并 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 输入两个字符串,将其合并为一个字符串后输出. 输入格式 输入两个字符串 输出格式 输出合并后的字符串 样例 ...
- Java实现 LeetCode 20 有效的括号
20. 有效的括号 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. ...
- java算法集训结果填空题练习2
1 欧拉与鸡蛋 大数学家欧拉在集市上遇到了本村的两个农妇,每人跨着个空篮子.她们和欧拉打招呼说两人刚刚卖完了所有的鸡蛋. 欧拉随便问:"卖了多少鸡蛋呢?" 不料一个说:" ...
- Linux 权限管理-ACL权限
ACL权限是为了在现有的所有者.所属组.其他人不够使用的情况下使用的,使用它必须保证文件所在的分区支持ACL df -h:查看系统所有分区信息 dumpe2fs -h /dev/vda1,可以查看分区 ...
- FTP服务器上传工具，FTP服务器上传工具下载！
IIS7服务器管理工具能够作为FTP的客户端,进行FTP的命令操作,可在客户端,下载,安装FTP软件! 同时,它也可以作为VNC的客户端,进行VNC的命令操作!它能够批量连接Windows和Linux ...
- 05-IntentFilter的匹配规则
IntentFilter的匹配规则 原则上一个Intent不应该既是显示调用又是隐式调用,如果二者共存的话以显式调用为主 隐式调用需要Intent能够匹配目标组件的IntentFilter中所设置的过 ...
- Mybatis反射修改SQL值
Mybatis反射修改SQL值 某一些情况下我们需要动态的改变Mybtis的执行的sql语句,有两种方法:1)使用拦截器,2)使用反射,拦截器的比较简单点,这里使用反射实现一次,有一点小坑,记录一下: ...