jQuery获取与设置div的宽高

最新推荐文章于 2021-08-10 21:16:42 发布
转载 最新推荐文章于 2021-08-10 21:16:42 发布 · 276 阅读 · 0

本文介绍使用jQuery通过尺寸函数和css方法获取与设置div元素的宽高。尺寸函数返回整数，而css方法返回带px的字符串。同时展示了如何通过不同方式实现div尺寸的动态调整。

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

https://blog.youkuaiyun.com/suiyu1992/article/details/52073522/

有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法

 

获取宽高

1. 尺寸函数：height() 获取高度，width() 获取宽度

2. css获取div宽高：css("height")获取高度，css("width")获取宽度

 

区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串

 

 

 

  1. $(".div1").click(function() {

  2. // 1. 使用width() height()方法来获取宽高 返回的是整形数字

  3. var divw = $(this).width();

  4. var divh = $(this).height();

  5. // 2.使用css方式获取宽高 带px的字符串

  6. var divw = $(this).css("width");

  7. var divh = $(this).css("height");

  8. alert("div宽:" + divw + ";div高:" + divh);

  9. });

 

两种弹出的值为：

div宽:100;div高:100

div宽:100px;div高:100px

 

设置宽高

第一种方法：使用尺寸函数设置 height(10) width(10)

第二种方法：使用css函数设置

 

css({"width":"10px","height":"10px"})//使用css设置多个属性时，放在大括号中属性间用逗号分隔

 

css("width","10px")//使用css设置单个属性时，将属性名称与属性值使用逗号分隔（不需要放到大括号中）

 

第三种方法：使用animate设置（具体用法在下个文章中）

 

.animate({width:"10px",height:"10px"},4000);//使用animate与css的参数不同之处在于：animate参数的属性名称不需要用引号扩起来

 

 

 

  1. $("#update").click(function() {

  2. var divw = $("#w").val();

  3. var divh = $("#h").val();

  4.  

  5. // 1. 使用width() height()方法来设置div宽高

  6. $(".div1").width(divw).height(divh);

  7.  

  8. // 2. 使用css的方式来设置宽高

  9. $(".div1").css({"width":divw+"px","height":divh+"px"});

  10.  

  11. // 3. 使用函数链的方式写代码

  12. // 注：使用css设置单个样式时，参数为css("width",divw+"px") 逗号分割

  13. $(".div1").css("width",divw+"px").css("height",divh+"px");

  14.  

  15. // 4. 使用不同函数的函数链

  16. $(".div1").css("width",divw+"px").height(divh);

  17.  

  18. // 5.animate()动画 宽高一块改变

  19. $(".div1").animate({width:divw+"px",height:divh+"px"},4000);

  20.  

  21. // 6.animate()动画 先改变宽，再改变高

  22. $(".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);

  23. });

 

 

html部分代码：

 

 

  1. <!DOCTYPE html>

  2. <html>

  3.  

  4. <head>

  5. <meta charset="UTF-8">

  6. <title></title>

  7. <style type="text/css">

  8. .div1 {

  9. background-color: darkorange;

  10. width: 200px;

  11. height: 200px;

  12. cursor: pointer;

  13. }

  14. </style>

  15. <script src="js/jquery-1.12.3.min.js"></script>

  16. </head>

  17.  

  18. <body>

  19. <p>宽:<input type="text" id="w" /></p>

  20. <p>高:<input type="text" id="h" /></p>

  21. <input type="button" value="修改尺寸" id="update" />

  22.  

  23. <div class="div1"></div>

  24. </body>

  25. </html>

使用jQuery修改DIV元素的高度和宽度
DevProPlus的博客
09-22 381
jQuery是一个流行的JavaScript库，它简化了JavaScript的操作，并提供了许多方便的方法和函数。通过以上的代码示例，我们可以看到使用jQuery修改DIV元素的高度和宽度非常简单。只需选择相应的元素，然后使用合适的方法来设置其高度和宽度即可。在上面的例子中，我们给DIV元素指定了一个唯一的ID属性（“myDiv”），以便在JavaScript中能够方便地选择和操作该元素。在上面的代码中，我们使用了jQuery的选择器来选择具有指定ID的DIV元素（“#myDiv”）。
jquery里面获取div区块的宽度与高度
热门推荐
soman的博客
10-09 6万+
获取宽度 $('div').width();     获取：区块的本身宽度 $('div').outerWidth();     获取：区块的宽度+padding宽度+border宽度 $('div').outerWidth(true);    获取：区块的宽度+padding宽度+border宽度+margin的宽度 获取高度 $('div').heig
jquery获取div的宽度
qq_40002311的博客
07-10 2223
例如： <div id="divLen" style="padding-left:10px;margin-left:10px"></div> <script> //宽度 //只是获取内容的宽度 var contentWidth = $("#divLen"). width(); //获取内容和padding的宽度 var contentWithPadding = $("#divLen"). innerWidth(); //获取内容+padding+border
jquery 获取 DIV的width
萌萌的It人 www.itmmd.com
04-27 1416
jquery 获取 DIV的width的语句： $("#keleyi_com").width(); 其中keleyi_com为DIV的id。 完整示例代码： jquery 获取 DIV的width(宽度) - 柯乐义本DIV的id为keleyi_com;为欢迎访问柯乐义http://www.keleyi.com$(document).ready(function () {alert("id
Jquery 获取 div 或其他元素的宽度与高度
ThankiFu的博客
02-02 824
获取宽度 $('div').width(); //区块的本身宽度 $('div').outerWidth(); //区块的宽度+padding宽度+border宽度 $('div').outerWidth(true); //区块的宽度+padding宽度+border宽度+margin的宽度 获取高度 $('div').height(); //区块的本身高度 $('div').outerHeig...
jquery实现动态改变div宽度和高度
10-24
这两个方法都允许我们获取或设置元素的宽度和高度。当我们传递一个参数给这两个方法时，它会设置元素的尺寸；而如果没有传递参数，它则会返回当前元素的宽度或高度。 在文章中提供的HTML代码中，我们定义了一个div...
jquery拖动改变div大小
10-19
在这里，`#test` div的样式被定义为具有特定的宽、高、背景色、文本居中和边框。此外，通过`cursor:move;`设置了鼠标悬停在元素上方时显示为移动光标，这是让用户知道该元素是可以被拖动的一个重要信号。 10. **跨...
Query常用DIV操作获取和设置长度宽度的实现方法
09-01
本文将详细讲解如何使用jQuery来获取和设置`div`元素的高度与宽度。 首先，我们可以使用jQuery的内置函数`height()`和`width()`来获取或设置元素的高度和宽度。这两个函数返回的是元素的实际像素值，不包含单位（如...
无法获取隐藏元素宽度和高度的解决方案
08-31
那么，如何使用jQuery Actual Plugin插件来获取隐藏元素的宽高呢？插件的作者提供了一个名为actual的方法，该方法可以根据需要获取元素的宽高信息。在使用该方法时，我们需要传入一个对象作为参数，该对象中可以包含...
通过jquery获取图片真实宽高
qq_25741071的博客
08-20 252
``javascript <!doctype html> 20200427-通过jquery获取图片真实宽高-版本2 @echo off for /f “delims=” %%a in (‘dir /b/a-d/oN .’) do echo %%a >>name.txt HTML转换为JS数组：https://qqe2.com/format/js2html –> ``` ...
jQuery获取与设置div的宽和高
ztnhnr的专栏
01-01 5714
前端页面开发时，通过jquery有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法。 一、获取宽和高 1.1 尺寸函数： width()获取宽度 height()获取高度 1.2 css方法： css("width")获取宽度 css("height")获取高度 区别： 尺寸函数返回的值为整型，而css获取的值为带px的字符串 举例： <!DOCTYPEhtml> <htmllang...
公益图书馆-学习笔记五-jquery来动态设置div高度
weixin_30888027的博客
08-22 169
使用jquery来设置html元素的显示与隐藏属性，同时调整div的高度 注意1：jquery无法获取图片高度！因为jquery是在网页框架加载完就立即执行，此时网页里的图片还没有加载，被jquery认为高度为0，而实际高度不是0，就会造成偏差。最好自己设定图片高度。 注意2：如果一个超链接标签 a 要绑定一段jquery函数，则设置<a herf="javascript:void(0)...
JS 获取div框的宽度和高度
OnePiece
06-16 7028
div 的scrollWidth 和 scrollHeight 属性。 在将div的内容设置好了以后， 这2个准确得到了宽度 和 高度。 function calculate(){ var divs = document.getElementById("ShowTempText"); divs.innerHTML="wuao ahshahsah 有么么么
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
JS动态获取div的宽度、高度
分享干货，拒绝水文
01-10 6万+
JS动态获取div的宽度var o = document.getElementById("div1");var w = o.clientWidth||o.offsetWidth;alert("Div1" width is "+w);JS动态获取div的高度同理：var o = document.getElementById("div1");var h = o.clientHeight||o.off
jq 计算div宽度--innerwidth，outerwidth，width
小利的博客
11-25 3096
width()方法用于获得元素宽度； innerWidth()方法用于获得包括内边界（padding）的元素宽度； outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度； 如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
jQuery 获取和设置元素的宽高
ivenqin的博客
08-10 5052
本节我们学习如何通过 jQuery 中提供的方法来获取或者设置元素的宽度和高度。 jQuery 中用于获取设置宽高的方法有如下所示： 方法 描述 width() 设置或返回元素的宽度 height() 设置或返回元素的高度 innerWidth() 返回元素的宽度，包括内边距 innerHeight() 返回元素的高度，包括内边距 outerWidth() 返回元素的宽度，包括内边距和边框 outerHeight() 返回元素的高度，包括内边距和边框 width()和
使用js设置div宽
最新发布
12-18
// 获取div元素 div.style.width = "200px"; // 设置宽度为200像素 ``` 2. **CSS样式对象**: ```javascript var divStyle = window.getComputedStyle(div); divStyle.width = "200px"; div.style.cssText = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值