js学习日记-各种宽高总结（配图）
1.窗口和浏览器
window.innerWidth、window.innerHeight 浏览器内部可用宽高
window.outerWidth、window.outerHeight 浏览器整体宽高
window.screenTop(Firefox采用screenX) 浏览器左上角距离屏幕顶端的距离(IE、Opera、Chrome中如果紧贴屏幕顶部的话，则Top为浏览器工具栏的高度，而Firefox则为0)
window.screenLeft((Firefox采用screenY) 浏览器左上角距离屏幕左边的距离
window.screen.width、window.screen.height(屏幕宽高)
window.screen.availWidth/availHeight(屏幕可用工作区的宽高)
2. document下面宽高
clientWidth/clientHeight：
元素的可视部分宽度和高度，即padding+content
如果没有滚动条，即为元素设定的宽高；有滚动条时，要减去滚动条所占的宽高
<!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>
.one{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000000;
overflow: auto;
}
</style>
</head>
<body>
<div class="one">
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
</div>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
console.log(oDiv.clientWidth+":"+oDiv.clientHeight);
}
</script>
</body>
</html>
上面例子中因为有纵向滚动条，所以clientWidth=200-垂直滚动条所占宽度
clientTop、clientLeft：
元素的border的宽度(分别是上方边框宽，左侧边框宽)
offsetWidth和offsetHeight
这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关
offsetWidth=clientWidth+clientLeft
offsetHeight=clientHeight+clientTop
offsetLeft和offsetTop
说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，即当前元素的border到包含它的offsetParent的border的距离。
scrollHeight和scrollWidth：
顾名思义，这两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度。
需要注意的是对body元素这两个属性的计算：
1.无滚动轴：
1.宽高小于浏览器窗口：浏览器窗口的宽高(不同的浏览器有不同的处理，取clientWidth和scrollWidth中较大的一个)
2.宽高大于浏览器窗口：内容的实际高度+padding+margin
2.有滚动轴：内容的实际高度+padding+margin
scrollTop和scrollLeft
属性可读写，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度
2.如何调用
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，使用document.body.xxx；
当document.compatMode等于CSS1Compat时，使用document.documentElement.xxx。
具体的应用可参考《用Javascript获取页面元素的位置》
3.Event的位置
clientX和clientY
鼠标点击位置相对于浏览器（可视区）的坐标（0,0），计算鼠标点击位置距离其左上角的位置，不管浏览器窗口大小如何变化，都不会影响点击位置的坐标
pageX和pageY
鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX
screenX和screenY
鼠标点击位置相对于屏幕的坐标
offsetX和offsetY
鼠标点击位置相对于容器左上角为起点的坐标，唯独Firefox不支持该属性，Firefox中与此属性相对应的概念是，event.layerX和event.layerY
<!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>
.one{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000000;
overflow: auto;
}
/*
body{
height: 5000px;
}
*/
</style>
</head>
<body>
<div class="one" id="one"> </div>
<script>
document.getElementById("one").onclick=function(e){
console.log(e.offsetX);
}
</script>
</body>
</html
点击div左上角时，x的值很小，点击右下角时x的值很大
js学习日记-各种宽高总结（配图）的更多相关文章
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- 前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
- js自定义获取浏览器宽高
/** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
- js 和 jquery的宽高
window 和 document : window 对象表示浏览器打开的窗口,可以省略 document对象(浏览器的html文档)是window对象的一部分 document.body等于wind ...
- 写个js动态调整图片宽高 （原创）
<body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...
随机推荐
- vuejs作用域插槽
作用域插槽 <div id='root'> <child> <template slot-scope='props'> <h1>{{props.item ...
- 简单的Nodejs模块
说千遍,道万遍,不如动手做一遍,我们实现一个node所谓的模块 看下上面的图,了解一下模块自始至终的一个流程,首先是创建模块,也就是一个入口的js文件,里面加了一些特定的功能,然后导出这个模块, ex ...
- php中的脚本加速扩展opcache
今儿在azure里装php5.5.4,发现原先php5.4.php5.3中的zend guard laoder以及php5.2中的Zend Optimizer均不能再用,一直很喜欢用的eacceler ...
- 2017.10.1 JDBC数据库访问技术
4.1 JDBC技术简介 4.1.1 定义 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的 java API,由一组类与接口组成,通过 ...
- python同时遍历数组的索引和元素
1.一般要同时遍历数组的索引和元素需要先确定数组的长度length(元素个数),然后使用range函数来生成数组的索引,最后使用该索引来访问数组的元素. 具体做法如下: l = [2,7,11,15] ...
- js世界这么大，闭包想看看
什么是闭包,为什么要用他?闭包是能够访问其他函数作用域的函数.我们来分析下句子成分(语文大神),闭包是函数,js函数的作用域分为全局作用域,局部作用域,eval作用域,并没有块级作用域形象的讲,每个函 ...
- 【赛时总结】◇赛时·VI◇ Atcoder ABC-104
◇赛时·VI◇ ABC-104 ◆??? 莫名爆炸……ABC都AK不了 QwQ C题竟然沦落到卡数据的地步:D题没有思路,直接放弃 ⋋( ◕ ∧ ◕ )⋌ ◆ 题目&解析 ◇A题◇ Rated ...
- RabbitMQ安装---rpm安装
首先介绍一下个人的安装环境是Linux-centos7: 一.安装和配置rabbitmq的准备工作: 下载erlang: wget http://www.rabbitmq.com/release ...
- 《Linux就该这么学》，刘小伙实在人，给打个广告
本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...
- ntp网络时间服务搭建
1.1 NTP简介 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议. 1.2 NTP用途 有些时候,局域网里面的设备需要进行时间的同步, ...