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定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- AUTOSAR-软件规范文档中的UML
https://mp.weixin.qq.com/s/vm5vWNSpbNIYh25-LjJfYg AUTOSAR软件规范文档中存在两种UML图: Sequence diagrams Config ...
- Chisel3 - bind - Op, ReadOnly, 左值
https://mp.weixin.qq.com/s/F_08jKFMoX9Gf_J_YpsDpg 两个数据变量进行某个操作(op),产生一个输出,这个输出存在一个匿名变量中.这个匿名变量就是以O ...
- (Java实现) 工作分配问题
工作分配问题 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][讨论版] 题目描述 设有n件工作分配给n个人.为第i个人分配工作j所需的费用为c[i][j] .试设计一个算法,计算最 ...
- Java实现蓝桥杯模拟存储转换
问题描述 在计算机存储中,15.125GB是多少MB? 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余的内容将无法得分. pac ...
- Java实现运动员分组
有N个人参加100米短跑比赛.跑道为8条.程序的任务是按照尽量使每组的人数相差最少的原则分组. 例如: N=8时,分成1组即可. N=9时,分成2组:一组5人,一组4人. N=25时,分4组:7.6. ...
- Linux文件处理命令touch、cat、more、head详解
命令touch详解 命令touch,所在路径及执行权限为: 可以看到,命令的路径为:/usr/bin/touch ,所以它的执行权限为所有用户 命令基本功能是创建空文件 (可以同时创建多个空文件,文件 ...
- C语言－耶稣门徒
<span style="font-family: Arial, Helvetica, sans-serif;"> </span> <span sty ...
- JVM性能优化 (一) 初识JVM
一.我们为什么要对JVM做优化 在本地开发环境中我们很少会遇到需要对JVM进行优化的需求,但是到了生产环境,我们可能会有下面的需求: 运行的应用"卡住了",日志不输出,程序没有反应 ...
- Java中的堆和栈
Java中的堆和栈 栈内存 存放基本数据类型和引用变量 堆内存 存放运行时创建的对象 一般来说,通过new关键字创建出来的对象都放在堆内存中 由于JVM是基于堆栈的虚拟机,而每个Java程序都运行在一 ...
- Hbase的基本架构以及对应的读写流程
一.HBase简介 1,定义: HBase 是一种分布式.可扩展.支持海量数据存储的 NoSQL 数据库. 2,HBase的架构图: 架构角色: 1)Master Master是所有Region Se ...