看图说话，jquery中的width innerwidth outerwidth

最新推荐文章于 2021-06-07 14:13:53 发布
最新推荐文章于 2021-06-07 14:13:53 发布
阅读量99 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/linksgo2011/archive/2013/01/09/2852374.html
本文深入探讨了IE浏览器与标准浏览器在盒子模型处理上的差异，特别是关于padding和border宽度对width的影响。IE的理解更为直观，而标准则是通过width、padding以及border之和来计算实际宽度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

据说所有的浏览器都是支持的！

补充一点：

　　IE 的盒子模型为 padding 和 border的宽度是被包含在设置的width中的，也就是说即使为元素添加了border和padding也是不会改变width的宽度。

但是在标准浏览器中实际计算的宽度由width 和 padding 以及 borde相加得到的。其实这里IE 的理解更好，但是标准就是标准。部分对错。

转载于:https://www.cnblogs.com/linksgo2011/archive/2013/01/09/2852374.html

JavaScript中的Window对象
hizyk的博客
11-24 700
声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！ window对象 window对象代表浏览器的一个实例 全局作用域 由于window对象同时扮演着JavaScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数，都会变成window对象的属性和方法 定义全局变量与在window对象上直接定义属性是不一样的，全局变量不能通过delete操作符删除，而在window对象上
原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解
代码小宝宝的博客
02-23 4137
** 对js里面的各种宽、高的理解 ** 1.首先对 window对象 、 document对象 做一个区别; window ：窗口（整个浏览器窗口），包含document; document ：整个HTML文档； 2.与 window 相关的宽、高： window.innerWidth：整个浏览器窗口的宽度； window.innerHeight：整个HTML文档的高度（body的高度） ...
jQuery中innerWidth()方法用法实例
10-24
主要介绍了jQuery中innerWidth()方法用法,实例分析了innerWidth()方法的功能、定义及获取第一个匹配元素内部区域宽度的使用技巧,需要的朋友可以参考下
clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & out...
weixin_30532987的博客
12-06 104
clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle clientHeight & clientWidth https://develope...
获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
weixin_34211761的博客
08-19 481
基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $(window).width() = width + padding $(window).height() = height +...
js及innerWidth、innerHeight、outerWidth和outerHeight属性
toumingyumaohuiyi的博客
11-23 8575
跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、 outerWidth和outerHeight。 在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。 Opera中，这两个
浅谈jQuery中height与width
10-23
总结来说，了解并正确运用jQuery中的height()、width()以及innerHeight()、innerWidth()、outerHeight()和outerWidth()方法，将有助于开发者更精确地控制网页元素的布局，提高网页的交互性和用户体验。在实际开发中...
详细介绍jQuery.outerWidth() 函数具体用法
10-23
在jQuery中，有三个相关的函数用于获取元素的宽度：`width()`、`innerWidth()` 和 `outerWidth()`。它们的区别在于： - `width()` 只返回元素的宽度，不包括内边距、边框和外边距。 - `innerWidth()` 包括元素的宽度...
jQuery.outerWidth() 函数详解
Edward的web前端修炼之路
07-20 1808
outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下图： 如果你要获取其它情况的宽度，请使用width()和innerWidth()，你可以点此查看三者之间的区别。该函数属于jQuery对象(实例
jQuery1.3.2中文手册.rar
07-25
3. **尺寸操作**: `height()`、`width()`获取元素高度和宽度，`outerHeight()`、`outerWidth()`包含边距，`innerHeight()`、`innerWidth()`不包括边距。 **三、jQuery AJAX** 1. **$.ajax()**: 核心的异步数据请求...
html检测浏览器宽高,JS动态解析浏览器和网页的各种宽高属性
weixin_40006763的博客
06-07 359
获得各种宽高的属性还有公式body {padding: 50px;height: 500px;border: 1px dotted red;overflow: scroll;}span {color: blue;}网页可见区域高document.body.clientHeight=height + padding * 2- 滚动条宽度测试的文字12网页可见区域宽document.body.clie...
JS：screen/client/offset/scroll/inner/avail的width/left
u011587399的专栏
03-14 656
1、名词解释 screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目标甲相对目标乙的距离。scroll：卷轴、卷动。指的是包含滚动条的的属性。inner：内部。指的是内部部分，不含滚动条。avail：可用的。可用区域，不含滚动条，易与inner混淆。
JS 中的 offsetWidth、clientWidth、scrollWidth、innerWidth、outerWidth 区别
KDDA的博客
11-07 922
*注：offsetWidth和clientWidth由于盒模型的不同，导致计算结果有所差异。 本文将讨论 box-sizing: content-box; 与 box-sizing: border-box; 两种场景下的计算情况。 若读者不清楚这两种盒模型的差异，请自行查看box-sizing 一、offsetWidth 和 offsetHeigh...
DOM元素尺寸offsetWidth,scrollWidth,clientWidth等详解
陈天天
07-01 1万+
例子：<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px"> <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div> <script>
clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总）
热门推荐
snowstorm的博客
03-22 2万+
原文链接：http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth  是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。  clientWidth  是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。  offsetWidth  是对象的可
图解offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset等
lzding的博客
06-05 7392
测试浏览器：ie7~ie11、chrome 和 firefox等。 一、测试1：无滚动条时，offsetWidth、clientWidth和scrollWidth （1）测试代码： Javascript *{margin: 0;padding: 0;} body{font: 12px/2 Arial;background-color: #ccc;padding: 20px;}
js操作浏览器窗口及元素大小
chenweiqian3446的博客
04-10 411
1、窗口位置 （1）获取窗口位置 窗口对象对应的是window对象。在window对象中使用属性screenTop、screenLeft、screenY和screenX（单位为像素）两组属性来表示窗口相对于屏幕上边和左边的位置。 明明只是表示两个变量，为什么会有...
详解clientWidth，scrollWidth，offsetWidth,innerWidth的区别
mr_fzz的博客
11-04 1万+
详解clientWidth，scrollWidth，offsetWidth,innerWidth的区别
jQuery 1.6 API全新中文使用手册
例如，`width()`, `height()`, `innerWidth()`, `outerWidth()`等方法都是常用的方法，以方便开发者在开发过程中调整元素的尺寸。 ##### 效果（Effects） jQuery在效果（动画）方面的支持非常强大，无需额外插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值