JQuery中outerWidth()和原生js中offsetWidth的区别

最新推荐文章于 2024-05-10 17:27:37 发布
最新推荐文章于 2024-05-10 17:27:37 发布
阅读量700 收藏
点赞数
分类专栏： javascript 文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43540219/article/details/107072573
版权

层级关系从外到内 ，margin border padding width

outerWidth()=width+padding+border

outerWidth(true)=width+padding+border+margin

offsetWidth计算盒模型的width+padding+border

当display=none,offsetWidth=0，而不会影响outerWidth()

DaftJayee
关注
专栏目录
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
yleave的博客
02-13 425
value description offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight 返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight 返回元素的高度（包括元素高度、内边距，不包括边框和外边距...
jQuery 动画效果
FellAsleep的博客
01-02 727
01-jquery动画 名称 用法 描述 show() $(‘div’).show(动画时间，动画完成回调) 展示动画，主要修改元素 宽高 + display为block hide() $(‘div’).hide(动画时间，动画完成回调) 隐藏动画，主要修改元素 宽高 + display为none slideDown() $(‘div’).slideDown(动画时间，动画完成回调) 滑入动画（卷帘门效果），主要修改元素 高度+ display为block slideUp() $
display为none时jquery的outerWidth()与原生offsetWidth差别
marie0119
02-14 861
display为none时jquery的outerWidth()与原生offsetWidth差别 #div1{ width: 100px; height: 100px; /*display: none;*/ } $(function(){ // alert($('#div1').outerWidth()); alert($('#div1').get(0).offse
JS 中的 offsetWidth、clientWidth、scrollWidth、innerWidth、outerWidth 区别
KDDA的博客
11-07 859
*注：offsetWidth和clientWidth由于盒模型的不同，导致计算结果有所差异。 本文将讨论 box-sizing: content-box; 与 box-sizing: border-box; 两种场景下的计算情况。 若读者不清楚这两种盒模型的差异，请自行查看box-sizing 一、offsetWidth 和 offsetHeigh...
原生js实现outerWidth()方法，用到getComputedStyle
weixin_30328063的博客
05-19 1260
function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[attr]; } else{ return window.getComputedStyle(obj, null)[attr] || document.defaultView.getCo...
JS中关于clientWidth offsetWidth scrollWidth 等的含义
weixin_30251587的博客
01-16 352
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth(包括边线的宽);网页可见区域高： document.body.offsetHeight(包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页...
原生js获取宽高与jquery获取宽高的方法关系对比
12-04
2. `offsetWidth` 等于 `border + padding + width`，这意味着原生JS中的`obj.offsetWidth`相当于jQuery中包含边框和填充的`outerWidth()`。 3. `$innerWidth` 等于 `padding + width`，即jQuery的`obj.innerWidth()...
jQuery获取浏览器中的分辨率实现代码
10-27
本文将详细介绍如何使用jQuery获取浏览器中的分辨率，并探讨相关的JavaScript方法。 首先，jQuery提供了`$(window).height()`和`$(window).width()`方法，它们分别返回浏览器当前窗口的可视区域高度和宽度。这意味...
JS,Jquery获取各种屏幕的宽度和高度
12-09
在原生JavaScript中，可以通过多种方法来获取屏幕的宽度和高度，具体如下： 1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**： - 这两个属性分别用于获取可视区域的宽度和高度，不包括...
jquery 的 outerWidth() 、width() 、innerWidth()
weixin_30371469的博客
10-24 140
.width()、innerWidth()、outerWidth()方法计算jQuery对象的宽度，它们之间的区别在于是否把padding、margin计算在内，因此它们的值 width() <= innerWidth() <= outerWidth() 。 outerWidth(options) 获取第一个匹配元素外部宽度（默认包括补白 padding和边框border ...
innerWith、outerWidth、clientWidth、offsetWidth、scrollWidth
最新发布
木昆灵寒酥的博客
05-10 515
例如，如果一个div元素的宽度为200px，内边距为10px，边框为1px，那么它的offsetWidth就是200px + 2 * 10px + 2 * 1px = 222px。例如，如果一个div元素的宽度为200px，内边距为10px，边框为1px，，那么它的clientWidth就是200px + 2 * 10px= 220px。例如，如果一个div元素的宽度为200px，内边距为10px，内容区域的宽度为300px，那么它的scrollWidth就是300px。是用来获取浏览器窗口的宽度的属性.
jquery获取元素offsetwidth
weixin_30906671的博客
06-12 770
//取id为id的Jquery对象然后转成htmlobject对象访问offsetWidth属性 $("#id")[0].offsetWidth; 转载于:https://www.cnblogs.com/cgf19920817/p/4572230.html
js及innerWidth、innerHeight、outerWidth和outerHeight属性
cxu123321的博客
10-22 2810
js及innerWidth、innerHeight、outerWidth和outerHeight属性 toumingyumaohuiyi 跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、 outerWidth和outerHeight。 在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访.
jQuery中offset方法
weixin_44900249的博客
04-25 1815
在js中获取元素实际宽度的方法是:div.offsetWidth; 获取元素距顶部的实际距离的方法是:div.offsetTop; jq当中 如果我要获取元素实际宽度 我不能这样写 $(".div").offsetWidth 这样写获取不到 我需要 $(".div").get(0).offsetWidth 或者 ...
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
zp19860529的博客
08-14 1159
JQuery中： 1、width()方法用于获得元素内容所占的宽度； 2、innerWidth()方法用于获得包括内边界（padding）的元素宽度； 算式：innerWidth()=width()+padding(左右) 3、outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度； 算式：outerWidth()=width()+padding(左右)+border(左右) 4、outerWidth()方法的参数为true（如：$(this).oute
offsetWidth、clientWidth、scrollWidth、scrollTop
过河卒子
03-14 1072
1. 基本概念 offsetWidth/offsetHeight 对象的可见宽度，包含滚动条和border。非标准属性，但各浏览器都支持 clientWidth/clientHeight 对象的可见宽度，不包含滚动条和border。 scrollWidth/scrollHeight（慎用） 元素完整的高度和宽度，overflow:hidden的部分也计算在内。 offsetLef
offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
热门推荐
javaloveiphone的专栏
03-11 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title> <script type="text/javascript" src="jquery.min.js"></script></head> <body
jQuery与原生js部分方法的差异
前端御书房
11-07 213
innerWidth 在原生js中该属性用于获取页面可以区域的宽度不包含滚动条的宽度，并且该属性元素并不能使用，只能是window才能有效 console.log(window.innerWidth); console.log($(".box").get(0).innerWidth); 但是在jQuery中innerWidth是一个方法，该方法不仅window有效，而且元素也可以使用，元素使用获取到的是元素的内部宽度，也就是content区域+padding的宽度。 <div clas
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>
innerwidth和outerwidth
03-16
innerwidth和outerwidth是网页开发中常用的两个属性，用于获取元素的...在JavaScript中，可以使用element.innerWidth和element.outerWidth来获取元素的内部宽度和外部宽度。这两个属性返回的值都是以像素为单位的整数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值