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定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- 【Storm】核心组件nimbus、supervisor、worker、executor、task
nimbus 是整个集群的控管核心,负责topology的提交.运行状态监控.任务重新分配等工作. zk就是一个管理者,监控者. 总体描述:nimbus下命令(分配任务),zk监督执行(心跳监控wor ...
- 【Java面试必备JVM】JVM看这篇就够了
链接–>JVM
- Java实现 LeetCode 400 第N个数字
400. 第N个数字 在无限的整数序列 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, -中找到第 n 个数字. 注意: n 是正数且在32为整形范围内 ( n < 231 ...
- Java实现 蓝桥杯VIP 算法提高 密码锁
算法提高 题目 2 密码锁 时间限制:1.0s 内存限制:1.0GB 问题描述 你获得了一个据说是古代玛雅人制作的箱子.你非常想打开箱子看看里面有什么东西,但是不幸的是,正如所有故事里一样,神秘的箱子 ...
- Java实现 LeetCode 32 最长有效括号
32. 最长有效括号 给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 & ...
- CDN百科 | 假如没有CDN，网络世界会变成什么样？
很多人都知道CDN是内容分发加速,所谓内容分发,就是将本来位于源站的内容分发到全国各地的节点,方便用户去就近访问所需的内容.随着移动互联网.云计算等一代代技术变革,CDN已经成为了缓解互联网网络拥塞. ...
- Java基础？看完以后再也不惧怕面试了
前言 这篇文章主要是Java基础部分,主要分为3个部分:Java集合.Java多线.JVM:这些东西帮助我面试成功率提升了很多.后面还有中间件Spring.Redis.RocketMQ等等吧,祝愿大家 ...
- ffmpeg m3u8生成 剪辑及格式转换
使用 ffmpeg 工具, 生成 m3u8 文件 ffmpeg -re -i 03.ts -c copy -f hls -hls_base_url /Users/admin/Downloads/dow ...
- git push 错误,回滚 push操作
作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 0.记一次使用git push后,覆盖了同事代码的糗事 前言: 都在WebStorm中操作,Idea或者PyCharm同理 为了高度还原尴尬 ...
- HashMap(三)之源码分析
通过分析HashMap来学习源码,那么通过此过程我们要带着这几个问题去一起探索 为什么要学习源码 怎么去学习 0.1 为什么要学习源码 这个问题,直接给出结论,学习源码肯定是有好处的,比如: 学习优秀 ...