使用jQuery获取包含margin的元素宽度和高度的方法

CyberOI

于 2023-10-03 21:27:53 发布

阅读量421

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript js

本文链接：https://blog.youkuaiyun.com/CyberOI/article/details/133529612

js 专栏收录该内容

160 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在前端开发中如何使用jQuery获取元素不仅包括内容、边框，还包含外边距的宽度和高度。通过自定义函数outerWidthWithMargin和outerHeightWithMargin，结合jQuery的内置方法和元素样式属性，可以实现这一功能，满足布局和样式调整的需求。

在前端开发中，我们经常需要获取元素的宽度和高度，以便进行布局和样式的调整。但是，使用jQuery的outerWidth()和outerHeight()方法默认情况下只返回元素的内容区域宽度和高度，不包含元素的边框(border)和外边距(margin)。如果我们需要获取包含外边距的元素宽度和高度，可以使用一些额外的技巧。

下面是一种获取包含margin的元素宽度和高度的方法：

// 获取包含margin的元素宽度和高度
function getOuterWidth(elem) {
   
   
  var width = elem.outerWidth(

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CyberOI

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

使用jQuery改变元素的margin值

PixelNovaO的博客

09-25

322

通过使用jQuery，可以轻松地改变元素的样式属性，包括margin（边距）属性。下面是一个示例，展示了如何使用jQuery来改变元素的margin值。首先显示当前的margin值为20px，然后显示修改后的margin值为50px。在上面的示例中，我们首先定义了一个具有class为"box"的div元素，并设置了一个初始的margin值为20px。这就是使用jQuery改变元素的margin值的一个简单示例。获取元素当前的margin值，并将其打印到控制台上。将元素的margin值修改为50px。

jquery获取元素包括margin在内的高度

weixin_44712870的博客

07-15

1451

使用outerHeight(true)方法参考： https://blog.youkuaiyun.com/qq_39650528/article/details/78643080

1 条评论您还未登录，请先登录后发表或查看评论

原生获取html的宽高,使用原生 js 如何获取元素真实高度包括(margin)

weixin_32512187的博客

05-31

1279

使用原生 js 如何获取元素真实高度包括(margin)?本人写了一个很愚蠢的方法(只能分别获取 width、marginTop、paddingTop等, 这样获取效率太低,有没方法可以一次获取得到呢?)html:<div class="container"><p class="text">text</p></div>css:.text {margi...

javaScript/js 获取屏幕宽高，元素宽高/margin/padding

好巧的博客

12-05

6540

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。// 使用，第一个参数元素，第二参数，元素的属性，如：width/height/margin/border都可以。如果本篇文章对你有帮助的话，很高兴能够帮助上你。// 兼容IE浏览器。

jQuery获取元素宽高（内边距、边框和外边距）

weijia_kmy的博客

12-22

1万+

返回元素的宽、高。 width() height() 返回元素的宽、高（包括内边距）。 innerWidth() innerHeight() 返回元素的宽度（包括内边距和边框）。 outerWidth() outerHeight() 返回元素的宽度（包括内边距、边框和外边距） outerWidth(true) outerHeight(true)<!doctype html> <html

原生JavaScript获取元素的margin外边距

FEI441544558的专栏

11-13

9014

最近想找一个可以获取元素高度（包括外边距margin）的方法，原生JS的实现方法一直没有找到，不过有一个方法可以获取元素的边距，记录一下：语法是（获取元素的属性值）： getComputedStyle(element[,pseudo]) 该语法一般有两种用法： document.defaultView.getComputedStyle(element[,pseudo]); 或者： ...

jQuery设置指定网页元素宽度和高度的方法

10-24

在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括设置和获取网页元素的宽度和高度。本篇文章将详细讲解如何利用jQuery的`width()`和`height()`方法来改变指定网页元素的尺寸。首先...

JS和jquery获取各种屏幕的宽度和高度的代码

10-27

4. **浏览器当前窗口文档body的总高度（包括border, padding, margin）**：`$(document.body).outerHeight(true)`，包含了元素的边框、内填充和外边距。 5. **浏览器当前窗口可视区域宽度**：`$(window).width()`。 ...

jQuery 获取屏幕高度、宽度的简单实现案例

10-22

以下是一些基于jQuery的实用方法和技巧，用于获取屏幕的宽度和高度。首先，通过jQuery对象获取当前窗口的可视区域高度和宽度，可以使用以下属性： - $(window).height()：返回浏览器当前窗口的可视区域高度。 - $...

jQuery获得包含margin的outerWidth和outerHeight的方法

10-24

本文将深入探讨jQuery中的`outerWidth()`和`outerHeight()`方法，特别是如何获取包含margin的元素外边距的宽度和高度。 `outerWidth()`和`outerHeight()`是jQuery提供的两个内置函数，它们用于获取元素的宽度和高度...

jQuery获取元素宽度（element内容、带padding和border、带margin三种）

木子Lee的博客

07-05

6721

分别为$.width()$.innerWidth(）和$.outerWidth()

Jquery获取 div 宽度与高度（width,padding,margin,border）

weixin_38203203的博客

01-03

1226

var content = $(‘div’). width();//只是获取div宽度 var contentWithPadding = $(‘div’). innerWidth();//获取div+padding的宽度 var withoutMargin = $(‘div’). outerWidth();//获取div+padding+border的宽度 var full = $(‘div...

JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）

热门推荐

张营的技术博客

03-13

4万+

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。 JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！ var content = $(‘div’). wid

jQuery获取margin-top和padding-top的值

快乐每一天

06-03

5118

var bordT = $('img').outerWidth() - $('img').innerWidth(); var paddT = $('img').innerWidth() - $('img').width(); var margT = $('img').outerWidth(true) - $('img').outerWidth(); var formattedBord ...

html中元素尺寸、坐标的获取

michael8512的博客

08-02

1187

html asdasd css *{margin:0;padding:0;} img{ border:0; width: 1780px; height: 1080px; } .main{ width: 350px; height: 200px; background: green; position: relative

获取元素宽高及位置的方法

csdn_zsdf的博客

04-23

3653

js的人一定会接触到client家族、scroll家族和offset家族。由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。 clientHeight、offsetHeight、clientTop、innerWidth、outerWidth、scrollHeight、offsetTop、scrollTop，scrollY 1.clientHeight / clie...

DOM操作之获取元素占位

qq_44531034的博客

03-29

456

宽度，高度，margin，padding，border 1.可以通过标签样式来获取获取到的结果是属性值有px单位 window.getComputedStyle(oDiv).height 2.其他方式 offsetHeight offsetWidth 宽/高+padding+border clientHeight clientWidth 高/宽+padding clientLeft cl...

jQuery常用到的方法

HL_xzf的博客

08-10

726

一、jQuery获取并设置 CSS类 1、添加类：addClass()，例如： $('#id').addClass('newclass'); 2、移除类：removeClass()，例如： $('#id').removeClass('oldclass'); 3、进行添加/移除类的切换操作：toggleClass()，例如： $('#id').toggleClass('isactive'); 备注：newclass、oldclass、isactive，均为css样式 4、设置指定的 ..

jQuery获得包含margin的outerWidth和outerHeight

泡泡的博客

07-07

488

var width = $("#div1").outerWidth(true);

获取元素的宽度和高度