【JavaScript-17】BOM-04 获取页面宽高、盒子宽高

八、获取页面宽高

响应式页面使用

1.window.innerWidth

不包含控制台、菜单栏(低配版的ie不支持)，包含滚动条

     var w1 = window.innerWidth;var h1 = window.innerHeight;

2.document.documentElement.clientWidth

兼容低版本的ie，页面可视的宽高不包含控制台，菜单栏，滚动条宽度

     var w2 =document.documentElement.clientWidth;var h2 = document.documentElement.clientHeight;

3.document.body.clientWidth;

获得body的值，清空内外边距之后与以上两个相同,不包含内外边距，滚动条

     var w3 = document.body.clientWidth;var h3 = document.body.clientHeight;

4.补充

屏幕大小发生变化时触发

onresize

 //补充：//屏幕大小发生变化时触发window.onresize = function (){console.log("屏幕大小发生变化的触发");}

九、盒子的宽高

offsetWidth,offsetHeight

获取的是实际宽度+内边距+边框=实际盒子的宽度

var box = document.querySelector(".box");console.log(box.offsetWidth,box.offsetHeight);

十、offset

//当父级没有定位时，偏移量计算的是本身到页面的距离
//当父级有定位时，偏移量计算的是本身到有定位的父级的距离
//当本身脱标时，偏移量就是本身的left/top

<style>*{padding:0;margin:0;}.box1{width: 300px;height: 300px;background-color: blue;margin-left: 20px;position: relative;}.box2{width: 100px;height: 100px;background-color: red;margin-left:30px;position: absolute;left: 40px;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div><script>var box2 = document.querySelector(".box2");console.log("距离左边的距离",box2.offsetLeft);console.log("向下偏移",box2.offsetTop);</script>

【JavaScript-17】BOM-04 获取页面宽高、盒子宽高相关推荐

vue 中获取页面卷进去的宽度或高度
vue项目中,获取TMD页面卷进去的高度总失败,比如: let top = document.documentElement.scrollTop || document.body.scrollTop; ...
JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
JavaScript获取浏览器可视区域的宽高
JavaScript获取浏览器可视区域的宽高在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可 ...
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...
java WebDriver + selenium 调用谷歌驱动 chromedriver 实现在 liunx 环境下无界面截图加自动获取页面最大真实页面内容高宽加各类型踩坑日记
目录 1.介绍 2.结果效果 2.1大图 2.2细节小图 3.依赖 4.代码 4.1引入 4.2具体代码 4.3执行 5.Linux下安装chrome和chromedriver 5.1yum安装 5. ...
用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的 ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...