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定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- 题解 CF1348D 【Phoenix and Science】
题目大意,每天细菌会在早上选择分裂,晚上生长. 观察题目,我们可以发现.不管我们怎么分裂细菌,这一天晚上的总质量都是前一天晚上的总质量加上今天的细菌数. 那么我们肯定希望细菌分裂的越多越好,这样我们减 ...
- Java实现 LeetCode 482 密钥格式化
482. 密钥格式化 给定一个密钥字符串S,只包含字母,数字以及 '-'(破折号).N 个 '-' 将字符串分成了 N+1 组.给定一个数字 K,重新格式化字符串,除了第一个分组以外,每个分组要包含 ...
- java实现第八届蓝桥杯生命游戏
生命游戏 题目描述 康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 这个游戏在一个无限大的2D网格上进行. 初始时,每个小方格中居住着一个活着或死了的细胞. 下一时刻每个细胞的 ...
- html页面引用video.js播放m3u8格式视频
//head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...
- 优雅的敲JS代码的几个原则
一.条件语句 1,使用 Array.includes 来处理多重 || 条件 // ----- 一般 ------ if (fruit == 'apple' || fr ...
- Android中Widget开发步骤
一.创建一个类,继承自 AppWidgetProvider 生命周期介绍: onEnabled():创建第一个widget时调用 onDisabled():删除最后一个widget时调用 二.在清单文 ...
- Elasticsearch 常见错误
一 read_only_allow_delete" : "true" 当我们在向某个索引添加一条数据的时候,可能(极少情况)会碰到下面的报错: { "error ...
- Git中的core.autocrlf选项
项目的开发环境为Windows,在Linux环境下编译,使用Git进行版本控制. 在安装好Git和TortoiseGit后,从远端clone,遇到一个奇怪的问题,Shell脚本中的LF总是被替换成了C ...
- JavaScript触发器
感谢:链接(视频讲解很详细) JavaScript触发器 一.功能 顾名思义就是操控鼠标或键盘触发(实现)一些特定功能. 二.功能实现 <script type="text/javas ...
- 最新 iOS 框架整体梳理（三）
这一篇得把介绍框架这个系列终结了,不能超过三篇了,不然太长了..... 还是老规矩,前面两篇的机票在下方: 最新 iOS 框架整体梳理(一) 最新 iOS 框架整体梳理(二) Part - 3 ...