jQuery获取与设置div的宽高

最新推荐文章于 2024-04-26 15:06:37 发布

租房请下载：房东直租APP

最新推荐文章于 2024-04-26 15:06:37 发布

阅读量4.7k

点赞数

分类专栏： jquery 文章标签： div jquery 宽度和高度 css

jquery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

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

获取宽高

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

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

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

[javascript]view plain copy 
   
 $(".div1").click(function() {  
     // 1. 使用width() height()方法来获取宽高 返回的是整形数字  
     var divw = $(this).width();  
     var divh = $(this).height();  
     // 2.使用css方式获取宽高 带px的字符串  
     var divw = $(this).css("width");  
     var divh = $(this).css("height");  
     alert("div宽:" + divw + ";div高:" + divh);  
 });  

两种弹出的值为：

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参数的属性名称不需要用引号扩起来

[javascript]view plain copy 
   
 $("#update").click(function() {  
     var divw = $("#w").val();  
     var divh = $("#h").val();  
       
     // 1. 使用width() height()方法来设置div宽高  
     $(".div1").width(divw).height(divh);  
       
     // 2. 使用css的方式来设置宽高  
     $(".div1").css({"width":divw+"px","height":divh+"px"});  
   
     // 3. 使用函数链的方式写代码  
     // 注：使用css设置单个样式时，参数为css("width",divw+"px") 逗号分割  
     $(".div1").css("width",divw+"px").css("height",divh+"px");  
       
     // 4. 使用不同函数的函数链  
     $(".div1").css("width",divw+"px").height(divh);  
   
     // 5.animate()动画 宽高一块改变  
     $(".div1").animate({width:divw+"px",height:divh+"px"},4000);  
       
     // 6.animate()动画 先改变宽，再改变高  
     $(".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);  
 });  

html部分代码：

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
   
     <head>  
         <meta charset="UTF-8">  
         <title></title>  
         <style type="text/css">  
             .div1 {  
                 background-color: darkorange;  
                 width: 200px;  
                 height: 200px;  
                 cursor: pointer;  
             }  
         </style>  
         <script src="js/jquery-1.12.3.min.js"></script>  
     </head>  
   
     <body>  
         <p>宽:<input type="text" id="w" /></p>  
         <p>高:<input type="text" id="h" /></p>  
         <input type="button" value="修改尺寸" id="update" />  
   
         <div class="div1"></div>  
     </body>  
 </html>  

租房请下载：房东直租APP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery获取与设置div的宽高

有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法获取宽高1. 尺寸函数：height() 获取高度，width() 获取宽度2. css获取div宽高：css("height")获取高度，css("width")获取宽度区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串[javas
复制链接

扫一扫