图解offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset等

最新推荐文章于 2022-11-25 00:23:44 发布
最新推荐文章于 2022-11-25 00:23:44 发布
阅读量415 收藏 1
点赞数
分类专栏： js/jq

不同浏览器：
在这里插入图片描述

**一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrollWidth

（1）测试代码**

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
body{font: 12px/2 Arial;background-color: #ccc;padding: 20px;}
#b1{width: 530px;height: 320px;background-color: #fff;position: relative;}
#b2{width: 220px;height: 130px;background-color: orange;border: 10px solid #085A90;padding: 10px;position: relative;left: 140px;top: 90px;}
</style>
</head>
<body>
<div id="b1"><div id="b2"></div></div>
<script>
window.onload = function(){	
	var oB2 = document.getElementById('b2');
 
	console.log("offsetWidth="+oB2.offsetWidth, "offsetHeight="+oB2.offsetHeight);
	console.log("clientWidth="+oB2.clientWidth, "clientHeight="+oB2.clientHeight);
	console.log("offsetLeft="+oB2.offsetLeft, "offsetTop="+oB2.offsetTop);
	console.log("scrollWidth="+oB2.scrollWidth, "scrollHeight="+oB2.scrollHeight);
	console.log("scrollLeft="+oB2.scrollLeft, "scrollTop="+oB2.scrollTop);
}
</script>
</body>
</html>

（2）测试结果
在这里插入图片描述
IE7下，scrollWidth = 20，scrollHeight = 34

（3）图解结果
在这里插入图片描述

二、测试2：有滚动条时，dom对象offsetWidth、clientWidth 和 scrollWidth

（1）测试代码

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
body{font: 12px/2 Arial;background-color: #ccc;padding: 20px;}
#b1{width: 300px;height: 220px;background-color: #fff;position: relative;overflow: auto;border: 10px solid #999;padding: 10px;}
#b2{width: 220px;height: 330px;background-color: orange;border: 10px solid #085A90;padding: 10px;position: relative;left: 140px;top: 90px;}
</style>
</head>
<body>
<div id="b1"><div id="b2"></div></div>
<script>
window.onload = function(){
	var oB1 = document.getElementById('b1');
	console.log("offsetWidth="+oB1.offsetWidth, "offsetHeight="+oB1.offsetHeight);
	console.log("clientWidth="+oB1.clientWidth, "clientHeight="+oB1.clientHeight);
	console.log("offsetLeft="+oB1.offsetLeft, "offsetTop="+oB1.offsetTop);
	console.log("scrollWidth="+oB1.scrollWidth, "scrollHeight="+oB1.scrollHeight);
	console.log("scrollLeft="+oB1.scrollLeft, "scrollTop="+oB1.scrollTop);
}
</script>
</body>
</html>

（2）测试结果

这里我们需要读取外层带滚动条的 div#b1 的值。ie7~ie11、chrome 和 firefox 结果一致，如下：
在这里插入图片描述
（3）图解结果
在这里插入图片描述

三、测试3：window对象的 outerWidth、innerWidth、pageXOffset 和 screenLeft（screenX）

（1）测试代码

<script>
window.onload = function(){
	console.log("innerWidth="+window.innerWidth, "innerHeight=" + window.innerHeight);
	console.log("outerWidth="+window.outerWidth, "outerHeight=" + window.outerHeight);
	console.log("pageXOffset="+window.pageXOffset, "pageYOffset=" + window.pageYOffset);
	console.log("screenX="+window.screenX, "screenY=" + window.screenY);
	console.log("screenLeft="+window.screenLeft, "screenTop=" + window.screenTop);
}
</script>

（2）图解结果（不同浏览器下，console 输出与下图部分有不同）
在这里插入图片描述
screenX 和 screenLeft 非常混乱，详细参考：http://blog.csdn.net/u010200222/article/details/10948059

mxclsh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
在JavaScript中，DOM元素的尺寸和位置是网页布局的关键因素，`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果，...
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
weixin_33782386的博客
06-03 417
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 原文：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight...
图解clientWidth,offsetWidth,scrollWidth
weixin_45645373的博客
08-23 271
关于clientWidth,offsetWidth,scrollWidth的文章很多，但我一直不太注意他们的区别，这里贴上自己尝试的图和一些文字说明帮助大家比较直观的看到他们的区别 clientWidth clientWidth/clientHeight就是一个盒模型的content区域的宽/高以及padding的宽/高相加的值 这是一个黑div，给他设置了width:300px;height:200px; 控制台打印client clientTop/clientLeft client家族的另外两个成员
详细介绍jQuery.outerWidth() 函数具体用法
weixin_39037804的博客
10-22 1359
outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true...
【零代码】4张图彻底搞清楚offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth
云间月
05-21 480
关于元素的位置与尺寸网上的讲解和介绍非常的多，下面这张图片应该是囊括的比较齐全了。但是弊端也比较明显，将所有的属性都糅合在了一起，非常不利于区分和理解。本文将元素的`offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth`等难以理解和容易混淆的属性区分开来，分别作图讲解其中的区别，帮助大家快速立即和建立知识记忆。
offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
09-22
在Web开发中，理解和掌握DOM元素的尺寸与位置属性至关重要，特别是`offsetWidth`、`clientWidth`、`scrollWidth`、`scrollTop`和`scrollLeft`这些属性。它们提供了关于元素几何特性的详细信息，有助于实现精确的布局...
scrollWidth,clientWidth与offsetWidth的区别
10-30
### scrollWidth、clientWidth与offsetWidth的区别 #### 一、scrollWidth详解 **scrollWidth** 属性表示元素及其内容的总宽度，包括由于内容溢出而不可见的部分。这一属性通常用于确定元素是否包含水平滚动条。...
scrollWidth,clientWidth,offsetWidth的区别
09-03
在网页开发中，理解和掌握DOM元素的尺寸属性是至关重要的，特别是`scrollWidth`、`clientWidth`和`offsetWidth`。这三个属性都是用来获取HTML元素宽度的，但它们各自的含义和应用场景有所不同。 首先，`scrollWidth...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
### HTML:scrollLeft, scrollWidth, clientWidth, offsetWidth 完全详解 #### 一、scrollHeight 和 scrollWidth **scrollHeight** 和 **scrollWidth** 分别用来获取一个元素的滚动高度和滚动宽度。 - **...
彻底理解 innerWidth、outerWidth、screen.width、vw 和 getBoundingClientRect的区别
聪明的竹子的博客
10-08 3266
起因 说实话，撸了接近三年的前端。每次要用到innerWidth、outerWidth、screen.width 、vw、clientWidth和 getBoundingClientRect，都很可耻地点击谷歌浏览器，然后…你懂的。才能知道我应该用那个。在此之前，我草草写了一篇极短的文章，天真地以为自己理解了，谁知不然，每次都是很熟练地…,哦不。 贴上图片，引以为戒: 说实话，至今没看懂这张图片，并且不知道为什么当初会吧这张图片放上去。手动狗头 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解
代码小宝宝的博客
02-23 3728
** 对js里面的各种宽、高的理解 ** 1.首先对 window对象 、 document对象 做一个区别; window ：窗口（整个浏览器窗口），包含document; document ：整个HTML文档； 2.与 window 相关的宽、高： window.innerWidth：整个浏览器窗口的宽度； window.innerHeight：整个HTML文档的高度（body的高度） ...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
热门推荐
xuantian868的专栏
10-21 9万+
  HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度o
详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth
qq_47443027的博客
11-25 3322
3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）
jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度
zhxh0376的专栏
06-05 8266
以前写代码中，每当需要获取元素的实际“宽度”（这里的宽度是指元素宽度加上其边距）时，都需要用元素宽度加上margin值才行，今天发现一个叫outerWidth(options)的方法 ,很好用。完成了原来需要用一段来操作做的工作。 这个方法不适用于window 和 document对象，可以使用.width()代替。 下面是其简单介绍 outerWidth(options) 获取第一个匹配
元素坐标、尺寸、滚动
huangpb的博客
09-19 1595
1. 鼠标所在的坐标：event.clientX; 和 event.clientY; 2. 元素自身的宽：el.offsetWidth 或者 window.getComputedStyle(el).width 元素自身的高：el.offsetHeight 或者window.getComputedStyle(el).height 整个网页高度:document.documen.........
clientWidth、offsetWidth、区别
weixin_50736511的博客
12-01 8724
clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth = width+左右padding 2，clientHeigh的实际高度 clientHeigh = height + 上下padding 3，clientTop的实际宽度 clientTop = boder.top(上边框的宽度) 4，clientLeft的实际宽度
图解JS盒子模型的基本属性：clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left
m0_37922443的博客
01-22 253
写一个JS盒子 <style> .container { width: 300px; height: 300px; border: 3px solid red; margin: 50px; position: relative; } .box { padding: 30px; width: 100px; height: 150px;
详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景
yb305
11-23 4484
clientLeft、clientHeight、clientWidth、clientHeight clientWidth、clientHeight元素内部宽度和高度,clientLeft、clientTop获取元素内边距边框到边框的距离. 大概如下图所示: clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 如上图所示, 计算方式为, 分为如下两种: 存在垂直滚动条 content width + paddin...
clientwidth offsetwidth
最新发布
04-11
clientWidth和offsetWidth都是用来获取元素的宽度的属性，但是计算方式不同。clientWidth是指元素的内容区域宽度加上左右内边距的宽度，不包括边框宽度和滚动条宽度。而offsetWidth是指元素的内容区域宽度加上左右内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值