JavaScript中的各种宽高属性的实现


Posted in Javascript onMay 08, 2020

在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等......这么多,傻傻分不清也正常啊。

本文的目标:

  1. 理清js及jquery的各种width和height
  2. 对width和高度做一些实际的应用

window和document

首先我们来高清两个概念:

  1. window和document的区别是什么?
  2. window.location和document.location是一样吗?

第一个问题:

  1. Window对象表示浏览器中打开的窗口;window对象可以省略。比如alert()、window.alert()。
  2. Document对象是Window对象的一部分。那么document.body 我们可以写成window.document.body;浏览器的HTML文档成为Document对象。

第二问题:
window对象的location属性引用的是Location对象,表示该窗口中当前显示文档的URL。
document的对象的location属性也是引用了Location对象。
那意思是:

window.location === document.location; //true

在通常情况下一样,frame也是一样

与window相关的宽高介绍

与window相关的宽高有一下几个:

  1. window.innerWidth,通过字面意思我们知道这是一个内部的宽度
  2. window.innerHeight,内部的高度
  3. window.outWidth,外部的宽度
  4. window.outHeight,外部的高度

window.innerHeight和window.outHeight

JavaScript中的各种宽高属性的实现

我发现在Windows 10下Chrome和360安全浏览器不一样、、、、(后面代码测试部分)

window.innerWidth和window.outWidth

JavaScript中的各种宽高属性的实现

挂靠在window下的宽高还有window.screen, window.screen包含有关用户屏幕的信息。它包括:

  • window.screen.width
  • window.screen.height
  • window.screen.availHeight
  • window.screen.availWidth
  • window.screenTop
  • window.screenLeft

图解

JavaScript中的各种宽高属性的实现

JavaScript中的各种宽高属性的实现

window相关宽高代码演示

演示代码:

console.log("innerWidth=",innerWidth);
console.log("innerHeight=",innerHeight);
console.log("outerWidth=",outerWidth);
console.log("outerHeight=",outerHeight);

Chrome浏览器下效果

JavaScript中的各种宽高属性的实现

代码:

console.info("screen.width=",screen.width);
console.info("screen.height=",screen.height);
console.info("screen.availWidth=",screen.availWidth);
console.info("screen.availHeight=",screen.availHeight);

在Chrome浏览器下效果

JavaScript中的各种宽高属性的实现

window相关宽高浏览器兼容问题

innerHeight和outerHeight是不支持IE9以下版本的,而screen系列则不存在兼容问题。

document下面client相关宽高介绍

docment下有三类属性:

  • 与client相关的宽高
  • 与offset相关的宽高
  • 与scroll相关的宽高

与client相关的宽高

与client相关的宽高又有如下几个属性:

  • document.body.clientWidth
  • document.body.clientHeight
  • document.body.clientLeft
  • document.body.clientTop

clientWidth和clientHeight
该属性指的是元素的可视部分宽度和高度,即padding+contenr
如果没有滚动条,即为元素设定的高度和宽度。
如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高。

我们来看如下代码:

body{
   border: 20px solid #000;
   margin: 10px;
   padding: 40px;
   background: #eee;
   height: 350px;
   width: 500px;
   overflow: scroll;
}

console.log(document.body.clientHeight);  //430(padding*2+height)
console.log(document.body.clientWidth);   //580(padding*2+width)

我们再看下面的代码:

#mydiv{
   width: 200px;
   height: 200px;
   background: red;
   border: 1px solid #000;
   overflow: auto;
}

在DIV中添加文字知道出现滚动轴,这时候

var mydiv = document.getElementById("mydiv");
console.log("mydiv.clientHeight=",mydiv.clientHeight);  // 200
console.log("mydiv.clientWidth=",mydiv.clientWidth);   // 183(减去了滚动条的宽度)

而在Mac系统下,滚动条不占高度,这时候client的宽度还是200.

总结

  • 假入无padding无滚动条,clientWidth=style.width
  • 假如有padding无滚动轴,clientWidth=style.width+style.padding*2
  • 假如有padding有滚动,且滚动是显示的,clientWidth=style.width+style.padding*2-滚动轴宽度

clientLeft和clientTop

这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,他的值就是0.

我们还是以body为例:

body{
   border: 20px solid #000;
   margin: 10px;
   padding: 40px;
   background: #eee;
   height: 350px;
   width: 500px;
   overflow: scroll;
}

console.log(document.body.clientLeft);  //20
console.log(document.body.clientTop);  //20

这一对属性是用来读取元素的body的宽度和高度的

  • clientTop=border-top的border-width
  • clientLeft=border-left的border-width

与offset相关宽高介绍

与offset相关的宽高又有如下几个属性:

  • document.body.offsetWidth
  • document.body.offsetHeight
  • document.offsetLeft
  • document.offsetTop

offsetWidth与offsetHeight

这一对属性指的是元素的border+padding+content的宽度和高度。

该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关。
我们还是以body为例:

body{
   border: 20px solid #000;
   margin: 10px;
   padding: 40px;
   background: #eee;
   height: 350px;
   width: 500px;
   overflow: scroll;
}

console.log("offsetWidth=",document.body.offsetWidth); 
//620(width+margin*2+padding*2+border*2)
console.log("offsetHeight=",document.body.offsetHeight);  
//470(width+margin*2+padding*2+border*2)

总结

假如无padding无滚动条无border:

offsetWidth=clientWidth=style.width

假如有padding无滚动条有border:

offsetWidth=style.width+style.padding2+(border-width)2

offsetWidth=clientWidth+border宽度*2

假如有padding有滚动条,且滚动条是显示的,有border:

offsetWidth=style.width+style.padding2+(border-width)2

offsetWidth=clientWidth+滚动条宽度+border宽度*2

offsetLeft和offsetTop

这两个属性是基于offsetParent的,了解这两个属性我们必须先了解它,什么是offsetParent呢?

  1. 如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为border.
  2. 假如当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素。

在IE6/7中:
offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)

在IE8/9/10及Chrome中:
offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParentd的padding-left)+(当前元素的margin-left)

在FireFox中:
offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)

、、、、看到这里是不是已经懵逼了?、、、还是举例子吧:

CSS:

body{
  border: 20px solid #000;
  margin: 10px;
  padding: 40px;
  background: #eee;
  height: 350px;
  width: 500px;
}
#mydiv{
  width: 400px;
  height: 200px;
  padding: 20px;
  margin :10px;
  background: #f60;
  border: 20px solid #888;
}

在IE8/910及Chrome中
mydiv.offsetLeft = 80
mydiv.offsetTop = 80

在火狐中
mydiv.offsetLeft = 60
mydiv.offsetTop = 60

在IE低版本IE6/7中是
mydiv.offsetLeft = 50
mydiv.offsetTop = 50

与scroll相关宽高介绍

与scroll相关的宽高属性有如下几个:

  • document.body.scrollWidth
  • document.body.scrollHeight
  • document.body.scrollLeft
  • document.body.scrollTop

scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的。

我们先来看看document.body的scrollWidth和scrollHeight:

给定宽高小于浏览器窗口

  • scrollWidth通常是浏览器窗口的宽度
  • scrollHeight通常是浏览器窗口的高度

给定宽高大于浏览器窗口,且内容小于给定宽高

  • scrollWidth给定的宽度+其所有padding、margin和border
  • scrollHeight给定的高度+其所有的padding、margin和border

给定宽高大于浏览器窗口,且内容大于给定宽高

  • scrollWidth内容宽度+其所有的padding、margin和border
  • scrollHeight内容高度+其所有的padding、margin和border

再来看看在某div中scrollWidth和scrollHeight:

在无滚动轴的时候

JavaScript中的各种宽高属性的实现

scrollWidth==clientWidth=style.width+style.padding*2

在有滚动轴的时候

JavaScript中的各种宽高属性的实现

scrollWidth==实际内容的宽度+padding*2
scrollHeight==实际内容的高度+padding*2

scrollLeft和scrollTop

这对属性是可读写(可被重新赋值) 的,指的是当元素其中的内容超出其宽高的时候,元素被卷起来的高和宽度。
obj.style.width和obj.style.height
对于一个dom元素,它的style属性返回的是一个对象,这个对象中的任意一个属性是可读写的,style.width等于CSS属性中的宽度style.height等于CSS属性中的高度。

Event对象的5种坐标

哪五种坐标?

  1. clientX和clientY,相对于浏览器(可是区左上角0,0)的坐标
  2. screenX和screenY,相对于设备屏幕左上角(0,0)的坐标
  3. offsetX和offsetY,相对于事件源左上角(0,0)的坐标
  4. pageX和pageY,相对于整个网页左上角(0,0)的坐标
  5. X和Y,本来是IE属性,相对于用CSS动态定位的最内层包容元素

到此这篇关于JavaScript中的各种宽高属性的实现的文章就介绍到这了,更多相关JavaScript 宽高属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
分析javascript原型及原型链
Mar 18 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
VSCode搭建React Native环境
May 07 #Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 #Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 #Javascript
You might like
PHP内核探索之变量
2015/12/22 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
浅谈Python中的私有变量
2018/02/28 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
构造方法和其他方法的区别
2016/04/26 面试题
个人承诺书怎么写
2014/05/24 职场文书
经济管理专业求职信
2014/06/09 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
八一建军节慰问信
2015/02/14 职场文书
商务代表岗位职责
2015/02/15 职场文书