js获取元素/屏幕宽高

总结如下

1、获取网页可视区域宽高（随着页面的缩放，所获取的值会相应改变）

方法一、不包括滚动条的宽高在内
document.documentElement.clientWidth 、document.documentElement.clientHeight
方法二、包括滚动条的宽高在内
window.innerWidth 、window.innerHeight

二者在没有滚动条的情况下，所获取的值相等

为什么所获取的高度与浏览器的高度差别较大？
这是因为浏览器的宽/高 = 网页可视区域的宽/高 + 其它宽/高（比如说：浏览器的tab页区域、网址区域、书签区域等）

2、获取网页整个页面宽高的方法（不随页面的缩放而改变）

document.documentElement.scrollWidth 、document.documentElement.scrollHeight

上述方法是获取，网页正文全文宽高

示例如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>*{margin: 0;padding: 0;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}#box{width:2000px;height:1200px;background: #ddd;padding:15px;margin: 50px;border: 10px solid red;}
</style>
<body><div id="box">为什么所获取的高度与浏览器的高度差别较大，<br/>这是因为 浏览器的宽/高 = 网页可视区域的宽/高  + 其它宽/高（比如说：浏览器的tab页区域、网址区域、书签区域等）</div>
</body>
<script>//以下测试所获取的值是在1920*1080的屏幕上所获得的值//获取网页可视区域宽高（不包括滚动条）let screenWidth = document.documentElement.clientWidth;let screenHeight = document.documentElement.clientHeight;console.log('浏览器屏幕的宽高（不包括滚动条）');console.log(screenWidth,screenHeight);    //1903 920    //获取网页可视区域宽高（包括滚动条在内）//在没有滚动条的情况下，window.innerHeight === document.documentElement.clientHeight; 宽度同理let h = window.innerHeight;let w = window.innerWidth;console.log('浏览器屏幕的宽高（包括滚动条）');console.log(w,h);     //1920 937//网页正文全文宽高(不包括滚动条，边框，但是包括了padding)let allWidth = document.documentElement.scrollWidth;let allHeight = document.documentElement.scrollHeight;console.log('网页正文全文宽高');console.log(allWidth,allHeight);   //2050 1300//1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；//2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；//3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；//4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；</script>
</html>

3、clientWidth、offsetWidth、scrollWidth等区别

clientWidth和clientHeigh 、 clientTop和clientLeft

 1，clientWidth的实际宽度clientWidth = width+左右padding2，clientHeigh的实际高度clientHeigh = height + 上下padding 3，clientTop的实际宽度clientTop = 上边框的宽度4，clientLeft的实际宽度clientLeft = 左边框的宽度

offsetWidth和offsetHight 、 offsetTop和offsetLeft

1,offsetWidth的实际宽度offsetWidth = width + 左右padding + 左右boder + 左右滚动条宽度2,offsetHeith的实际高度offsetHeith = height + 上下padding + 上下boder + 上下滚动条高度3，offsetTop实际宽度offsetTop：当前元素 上边框外边缘 到 最近的已定位父级元素的上边框 内边缘的距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离4，offsetLeft实际宽度offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

scrollWidth和scrollHeight 、 scrollTop和scrollLeft

 1，scrollWidth实际宽度scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）。2，scrollHeight的实际高度scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）3，scrollTopscrollTop :内容层顶部 到 可视区域顶部的距离。4，scrollLeftscrollLeft:内容层左端 到 可视区域左端的距离.

js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别相关推荐

微信小程序根据wx.getSystemInfo获取屏幕尺寸，并动态改变元素宽高尺寸，示例
通过js获取屏幕尺寸,并改变元素尺寸效果图 index.wxml <view class="body-view" style="width:{{wWidth}}r ...
Android获取屏幕尺寸，屏幕适配
获取屏幕尺寸: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics( ...
php如何让图片铺满屏幕,如何解决js获取屏幕大小并且让图片自适应的方法
在写h5页面的时候,经常会需要将图片自适应大小,一般都是用等比例的缩放,这就有个问题,当上传的图片不是一个规格时就会出现展示图片不完美. 为了解决这个问题,我们可以通过js去获取图片的大小,然后在根据 ...
php自动适应屏幕大小,如何解决js获取屏幕大小并且让图片自适应的方法
在写h5页面的时候,经常会需要将图片自适应大小,一般都是用等比例的缩放,这就有个问题,当上传的图片不是一个规格时就会出现展示图片不完美. 为了解决这个问题,我们可以通过js去获取图片的大小,然后在根据 ...
php 获取手机屏幕宽度,Swift-使用UIScreen类获取屏幕尺寸
Swift-使用UIScreen类获取屏幕尺寸在iOS 9中, 使用 UIScreen.mainScreen().applicationFrame 会报警: 'applicationFrame' w ...
Android 获取屏幕尺寸（设备对角线的英寸数）
使用屏幕的实际的宽高,根据勾股定理来计算设备的尺寸. 由于Android系统版本的不同和有的设备具有虚拟按键,需要根据不同的SDK的版本使用不同的方法来获取屏幕的实际宽高. 计算方法: Math.sq ...
[UIScreen MainScreen].bounds.size获取屏幕尺寸不准确
[UIScreen MainScreen].bounds.size获取屏幕尺寸不准确原因:在启动页对应.xcassets文件中的设置的启动页没有完全设置好,只要把全部的尺寸都设置就解决了
图解clientWidth,offsetWidth,scrollWidth
关于clientWidth,offsetWidth,scrollWidth的文章很多,但我一直不太注意他们的区别,这里贴上自己尝试的图和一些文字说明帮助大家比较直观的看到他们的区别 clientWid ...
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...

js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别