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定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- 3. OpenCV-Python——图像梯度算法、边缘检测、图像金字塔与轮廓检测、直方图与傅里叶变换
一.图像梯度算法 1.图像梯度-Sobel算子 dst = cv2.Sobel(src, ddepth, dx, dy, ksize) ddepth:图像的深度 dx和dy分别表示水平和竖直方向 ks ...
- Java实现 LeetCode 60 第k个排列
60. 第k个排列 给出集合 [1,2,3,-,n],其所有元素共有 n! 种排列. 按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下: "123" &q ...
- Java实现 蓝桥杯 算法提高 字符串压缩
试题 算法提高 字符串压缩 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 编写一个程序,输入一个字符串,然后采用如下的规则对该字符串当中的每一个字符进行压缩: (1) 如果该字符是 ...
- 第六届蓝桥杯JavaA组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.熊怪吃核桃 题目描述 森林里有一只熊怪,很爱吃核桃.不过它有个习惯,每次都把找到的核桃分成相等的两份,吃掉一份,留一份.如果不能等分, ...
- node实现图片分割
前言 最近,女王大大日常找我弄图片,本来之前我一直是ps帮他弄得,后来- -,ps不能分割过长的图片,我就想想能不能通过代码来帮他实现好了. 经过我在npm搜索一番,发现没有一个纯代码层面的high ...
- SmokePing 快速搭建
SmokePing介绍 smokeping是来监控IDC机房网络质量情况,可以从监控图上的延时与丢包情况分辨出机房的网络是否稳定,是否为多线,是否为BGP机房以及到各城市的三个运行商网络各是什么情况. ...
- 如何通过AzureAD平台提供的授权方式访问sharepoint online
官方文档: 1.https://docs.microsoft.com/zh-cn/previous-versions/azure/dn645543(v=azure.100)?redirectedfro ...
- Java I/O模型及其底层原理
Java I/O是Java基础之一,在面试中也比较常见,在这里我们尝试通过这篇文章阐述Java I/O的基础概念,帮助大家更好的理解Java I/O. 在刚开始学习Java I/O时,我很迷惑,因为网 ...
- Python 抓取网页tag操作
1. 获取操作tag 获取操作tag的接种方式: soup.find_all(name=None, attrs={}, recursive=True, text=None, limit=None, * ...
- 【shell】十分钟轻松入门；如果没入门，您吐口口水再走吧！
一.什么是shell? Shell是什么? 1.Shell 是一个程序,Linux默认是用bash. Shell 是一个用 C 语言编写的程序,既是一种命令语言,又是一种程序设计语言,是用户使用Lin ...