jQuery 获取元素margin-bottom值

最新推荐文章于 2025-11-15 11:07:16 发布

原创最新推荐文章于 2025-11-15 11:07:16 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#jQuery #margin-bottom #marginBottom

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

jquery

20 篇文章

订阅专栏

博客可能围绕jQuery以及margin-bottom、marginBottom展开，jQuery是前端开发常用库，margin相关属性用于页面布局样式设置，在前端页面设计中有重要作用。


var px = $('#sampleDiv').css('marginBottom');  // px = '400px'

var num= parseInt( $('#sampleDiv').css('marginBottom') );  // num = 400

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_格鲁特宝宝

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

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

CyberOI的博客

10-03

424

在前端开发中，我们经常需要获取元素的宽度和高度，以便进行布局和样式的调整。但是，使用jQuery的outerWidth()和outerHeight()方法默认情况下只返回元素的内容区域宽度和高度，不包含元素的边框(border)和外边距(margin)。最后，将内容区域的宽度和高度与对应的margin值相加，得到包含margin的最终宽度和高度。通过以上方法，我们可以灵活地获取包含margin的元素宽度和高度，以满足我们在前端开发中的各种需求。函数来获取包含margin的宽度和高度，并将结果打印到控制台。

CSS 学习之正确看待 CSS 世界里的 margin 合并

青颜的天空的博客

01-03

1576

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距，这样的现象称为“margin 合并从此定义上，我们可以捕获两点重要的信息。块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流，因此发生 margin 合并的就是垂直方向。

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

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

快乐每一天

06-03

5120

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

JQ怎么获取margin-left的值

冰蝶的专栏

06-16

7066

var margin =$("#Modules .list").css('marginLeft');

jquery获取元素padding

天天向上

03-16

1644

var paddingLeft = $("#contentDiv").css("padding-left"); // 结果："5px" paddingLeft.replace('px', '')); // 结果："5" parseInt(paddingLeft.replace('px', '')); //转换为int

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】常用API——尺寸、位置操作

早睡早起长头发的博客

01-14

666

一、jQuery 尺寸以上参数为空，则是获取相应值，返回的是数字型。如果参数为数字，则是修改相应值。参数可以不必写单位。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .container{ width: 300px; margin: 30px auto; } .box{ border: 2px solid #000; background: #eee; padding: 10px; } p{ font-size: 18px; } input{ height: 30px; } button{ margin-bottom: 30px; } </style> </head> <body> <div class="container"> <button class="btn1">获取文本内容</button> <button class="btn2">获取内容</button> <button class="btn3">获取表单value值</button> <div class="box"> <p>我是第一行</p> <p>我是第二行</p> 输入框:<input class="getVal" type="text" value="Hello Educoder"/> </div> </div> <script> $(function(){ //------------ Begin ----------- //------------ End -------------- }) </script> </body> </html>根据提示，在右侧编辑器Begin至End之间填充代码，获取元素的内容和属性值。要求如下：点击【获取文本内容】按钮，直接弹出类名为box的元素的文本内容；点击【获取内容】按钮，直接弹出类名为box的元素的内容；点击【获取表单 value 值】按钮，获取类名为getVal的元素的value值和type属性值，用"---"拼接，并赋值给变量getValue，弹出变量getValue的值。格式注意：获取元素统一用类名获取；统一用双引号""表示字符串。

最新发布

11-25

以下是在给定 HTML 代码的 Begin 至 End 之间填充的 jQuery 代码，实现点击相应按钮获取元素内容和属性值的功能： ```html <!DOCTYPE html> <meta charset="UTF-8"> ...

第1关：jQuery获取内容和属性编程要求根据提示，在右侧编辑器Begin至End之间填充代码，获取元素的内容和属性值。要求如下：点击【获取文本内容】按钮，直接弹出类名为box的元素的文本内容；点击【获取内容】按钮，直接弹出类名为box的元素的内容；点击【获取表单 value 值】按钮，获取类名为getVal的元素的value值和type属性值，用"---"拼接，并赋值给变量getValue，弹出变量getValue的值。格式注意：获取元素统一用类名获取；统一用双引号""表示字符串。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .container{ width: 300px; margin: 30px auto; } .box{ border: 2px solid #000; background: #eee; padding: 10px; } p{ font-size: 18px; } input{ height: 30px; } button{ margin-bottom: 30px; } </style> </head> <body> <div class="container"> <button class="btn1">获取文本内容</button> <button class="btn2">获取内容</button> <button class="btn3">获取表单value值</button> <div class="box"> <p>我是第一行</p> <p>我是第二行</p> 输入框:<input class="getVal" type="text" value="Hello Educoder"/> </div> </div> <script> $(function(){ //------------ Begin ----------- alert(textContent); alert($(".box").html()); alert(getValue)$(".btn3").click(function(){ var value = $(".getVal").val(); var type = $(".getVal").attr("type"); var getValue = value + "---" + type; alert(getValue); }); //------------ End -------------- }) </script> </body> </html>

03-09

好的，我现在需要帮用户解决如何使用jQuery获取元素的内容和属性的问题。用户希望点击按钮后弹出指定类名元素的文本内容、HTML内容、表单元素的value值和type属性值。让我先理清楚用户的需求。首先，用户提到了几...

3、jQuery选择器：随心所欲获取元素

honey的博客

11-15

本文深入介绍了jQuery的选择器和DOM遍历方法，涵盖CSS、XPath及自定义选择器的使用技巧，并结合实际案例展示如何动态更新导航菜单、实现表单验证等功能。同时探讨了性能优化策略，如缓存选择器结果和避免复杂选择器，帮助开发者高效操作DOM，提升前端开发效率。

jq获取元素到底部的距离

weixin_33937778的博客

09-21

3037

// var wh = $(window).height(),//是文档窗口高度 // ot = $("#icoimg").offset().top,//是标签距离顶部高度 // ds = $(document.documentElement).scrollTop();//是滚动条高度//ds = window.pageYOffset || document.docum...

jq css padding top,jQuery获取margin-top与padding-top值

weixin_36429702的博客

08-03

1061

例子：复制代码代码示例://分别取得margin-top与padding-top值var bordT = $('img').outerWidth() - $('img').innerWidth();var paddT = $('img').innerWidth() - $('img').width();var margT = $('img').outerWidth(true) - $('img'...

jquery获取html元素的绝对位置和相对位置的方法

dos_186的博客

08-28

676

绝对位置坐标：复制代码代码如下: $("#elem").offset().top $("#elem").offset().left 相对父元素的位置坐标：复制代码代码如下: $("#elem").position().top $("#elem").position().left 另： static(默认)

Jquery获取元素的margin-top:$("#id").offset().top

kungfu_panda的专栏

08-14

9351

var height = $("#id").offset().top; alert('height');

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

weixin_44712870的博客

07-15

1454

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

jq获取元素的padding_JQ常用方法 - 其他关系查找方法

weixin_27374911的博客

01-30

1170

好好学习，天天向上本章主要内容是：JQ其他关系查找方法，find() 后代元素、紧邻的兄弟元素方法（单多选）示例代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...

jquery 设置css margin-left

OnlyRu丶小心心

09-06

1万+

$("#sanjiaoLeft").css("marginLeft",val); $("#sanjiaoLeft").css({"margin-left": val, "background-color": "blue" });

beam：使用jQuery实现元素的相对定位

使用JavaScript动态改变CSS定位属性，可以通过获取和设置元素的`style`对象的`position`、`top`、`left`、`right`、`bottom`等属性来实现。 ### 知识点5：CSS垂直和水平居中技术描述中出现的“vertical middle”和...