jq获取元素尺寸：innerWidth（）、innerHeight（）、outerWidth（）、outerHeight（）、outerWidth（true）、outerHeight（true）

于 2022-11-11 08:59:38 发布
阅读量487 收藏
点赞数
分类专栏： web前端开发 文章标签： javascript css 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1598452168YY/article/details/127799523
版权

获取元素的尺寸：

js获取元素尺寸：

  • js获取元素尺寸的方法：offsetWidth、offsetHeight、clientWidth、clientHeight；
  • 区别是：offset是内容宽+padding+border，client是内容宽+padding；
  • 但是设置完display：none；就拿不到这个值了；

jq获取元素尺寸：

  • jq既可以单独获取到“内容的宽高”，又可以获取到“内容+padding”的尺寸，也可以获取到“内容+padding+border”的尺寸，甚至可以获取到“内容+padding+border+margin”的尺寸；
  • 而且即使设置display：none；也可以获取到需要的尺寸；
  • width（）、height（）：获取内容的尺寸

核心代码：

<body>
    <div></div>
    <script>
        //获取内容的尺寸
        console.log($("div").width(),$("div").height())
    </script>
</body>

css样式：

<style>
        div{
            width: 100px;
            height: 100px;
            /* background-color: skyblue; */
            padding: 10px;
            border: 1px solid black;
            margin: 50px;
        }
</style>

结果：100  100

  • innerWidth（）、innerHeight（）：获取内容+padding的尺寸
//获取内容+padding的尺寸
console.log($("div").innerWidth(),$("div").innerHeight())

结果：120 120

  • outerWidth（）、outerHeight（）：获取内容+padding+border的尺寸
//获取内容+padding+border的尺寸
console.log($("div").outerWidth(),$("div").outerHeight())

结果：122 122

  • outerWidth（true）、outerHeight（true）：获取内容+padding+border+margin的尺寸
//获取内容+padding+border+margin的尺寸
console.log($("div").outerWidth(true),$("div").outerHeight(true))

结果：222  222

陌一一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
12-09
代码如下:<!DOCTYPE html PUBLIC “-//W3C... <head> <title>jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用</title> <s
JQuery获取元素尺寸、位置及页面滚动事件应用示例
10-17
3. `outerWidth()` 和 `outerHeight()`：这将返回元素的总尺寸，包括内容、内填充和边框，但不包括外边距。 4. `outerWidth(true)` 和 `outerHeight(true)`：与上一个方法类似，但同时也包含了外边距。 以下代码...
JQuery——outerHeight()
m0_37616866的博客
10-18 233
一、收集例子 1、如需包含 margin，请使用 outerHeight(true) <style> .test{ height:100px; width:200px; padding:10px; margin:10px; border:5px solid red; } </style> <div class="test"></div> <script> $(function(){ var h = $(".test").ou
原生js实现outerWidth()方法，用到getComputedStyle
weixin_30328063的博客
05-19 1235
function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[attr]; } else{ return window.getComputedStyle(obj, null)[attr] || document.defaultView.getCo...
innerWidth( )、outerWidth()、outerWidth(true)尺寸大小
m0_51040189的博客
05-01 643
1）以上参数为空，则是获取相应值，返回的是数字型。 2）如果参数为数字，则是修改相应值。 3）参数可以不必写单位（写单位加""） <style> div { width: 200px; height: 200px; background-color: red; padding: 10px; border: 15px solid green; ...
jQuery中outerHeight()的用法
张井乙ccccyc的博客
02-16 964
jQuery中outerHeight()的用法一定会有人碰到过，用outerHeight()时外边距获取不到。这是因为它有个参数选项，这个参数定义了使用它时要不要带参数 $(selector).outerHeight(options) 参数 值 作用 options true 边距计算在内 false 包括内边距和边框 空 包括内边距和边框 同理o
offset client scroll系列
qq_38686150的博客
02-08 207
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清，这里就来总结一下这些方法的用法和含义。 注意： 下面元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用，window属性通过 window.属性 的方式使用，document属性则通过document调用。 offsetTop：元素到offsetParent顶部的距离 offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absol
jquery中获得元素尺寸和坐标的方法整理
10-25
综上所述，jQuery提供了一系列用于获取和设置元素尺寸与坐标的便捷方法。开发者可以根据自己的需求选择合适的方法来实现特定的页面布局或交互效果。这些方法不仅简化了代码，也提高了开发效率。需要注意的是，为了...
原生JS获取元素的位置与尺寸实现方法
10-19
9. 窗口尺寸：window对象的innerWidth和innerHeight属性提供了浏览器窗口内文档显示区域的宽度和高度，包括了滚动条（如果有的话）。而outerWidth和outerHeight则提供了浏览器窗口本身（包括边框、滚动条等）的外...
jQuery----获取标签元素的尺寸（width height、innerWidth innerHeight、outerWidth() 、outerWidth(true) ）
DcTbnk的博客
04-29 523
<script src="./jquery.min.js"></script> <script> // 获取标签的占位 // width 和 height // padding // border // margin // 3个方法,4种使用方式 // width() ...
js获取图片真实宽高
777
08-11 1406
首先是元素的innerWidth属性，或者jQuery中的width()方法： <img id="img" src="1.jpg"> <script type="text/javascript"> var img = document.getElementById("img"); console.log(img.innerWidth); // 600 </scri...
JQ中的width()，height(),innerwidth(),innerheight(),outerwidth(),outheight()的区别
LFW的博客
12-12 447
对jq的 width()， height(), innerwidth(), innerheight(), outerwidth(), outheight() 理解
（转）jQuery height()、innerHeight()、outerHeight()函数的区别详解
microcosmv的博客
02-21 415
链接：jQuery height()、innerHeight()、outerHeight()函数的区别详解 函数 高度范围 jQuery版本 支持写操作 height() height 1.0+ 1.0+ innerHeight() height + padding 1.2.6+ 1.8.0+ outerHeight() height + pad
JQ height()、innerHeight()、outerHeight()函数的区别
一直专注于互联网
02-28 344
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。   下...
jquery中outerHeight()与height()的区别
hejisan的专栏
04-22 636
innerHeight() 方法返回第一个匹配元素的内部高度。如下面的图像所示，该方法包含 padding，但不包含 border 和 margin。innerWidth() 方法返回第一个匹配元素的内部宽度。如下面的图像所示，该方法包含 padding，但不包含 border 和 margin。width() 方法设置或返回被选元素的宽度。当该方法用于返回宽度时， 则返回第一个匹配元素的宽度。当...
jquery语法学习08（给标签动态增加CSS样式、动态给增加标签和文本还有值 、 offset、innerwidth、outerwidth、scrollTop）
时意
08-09 1298
这里主要讲innerwidth 喊outerwidth的含义 1） addclass 来给标签增加写好的类样式 removeClass 能增加就能删除 toggleClass 这个切换很有意思 样式之间可以动态切换 <!DOCTYPE html> <html lang="en"> <head> ...
Jquery(JS)中.height()和.innerHeight()，outerHeight()的差别
请叫我大师兄
02-19 3571
Jquery(JS)中.height()和.innerHeight()，outerHeight()的差别,同理得宽也是这么滴。
JS、JQuery获取各种高度和元素距离
ksx2333的博客
04-01 5004
文章目录前言1 js原生1.1 offset系列1.2 client系列1.3 scroll系列2 jquery写法2.1 offset和position2.2 元素滚动2.2.1 scrollTop()2.2.2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()2.2.3 $('body,html').scrollTop(60)2.3 元素的尺寸2.3.1 内容尺寸 与css中设置的响应的属性相同2.3.2 内部尺寸2.
jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
weixin_30808575的博客
10-15 141
var a =元素本身的宽度； width() = a； innerWidth() = a+padding; outerWidth() = a+padding+border; outerWidth(true) = a+padding+border+margin; 在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（paddin...
"深入理解Jquery尺寸和位置操作技术
通过使用width()、height()、outerWidth(true)、outerHeight(true)、innerWidth()和innerHeight()等方法，可以方便地获取或设置元素的尺寸，包括包含padding、border、margin等内容。这些方法可以帮助开发者在前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值