js進階 11-6 jquery如何獲取和設置元素的寬高（jquery多方法）

js進階 11-6? jquery如何獲取和設置元素的寬高（jquery多方法）

一、總結

一句話總結：jquery里面多是方法啊，比如jquery對象的寬高。所以取值是方法，賦值就是方法里面帶參數。

1、百度富文本編輯器ueditor如何設置寬高？

jquery對象的width()和height()方法

37             $('#btn2').click(function(){ 38  $("#div1").width(50) 39  $('#div1').height(50) 40  })

2、juqery對象的寬高對應的三個方法是什么，分別表示什么意思？

元素的寬度高度

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
innerWidth() 方法返回元素的寬度（包括內邊距）
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）
height()、innerHeight()、outerHeight()與寬度類似

3、juqery對象如何設置一個表示全副武裝的寬度（包括相關的一切）？

outerWidth()方法加true參數

34             //outerWidth()    width + padding + border+margin
35                 alert($("#div1").outerWidth(true))

4、juqery對象的innerWidth()方法包括的是哪個邊距？

內邊距? padding

5、jquery的匿名函數中的index參數表示什么意思？

因為jquery對象多是集合，所以index就是表示所選元素的下標

43                 $("#main div").width(function(index,oldWidth){ 44 //alert(index) 45 return oldWidth*(index+1)/5 46  })

二、jquery如何獲取和設置元素的寬高

1、相關知識

元素的寬度高度

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
innerWidth() 方法返回元素的寬度（包括內邊距）
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）
height()、innerHeight()、outerHeight()與寬度類似

2、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文檔</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         #main{
11             background: #ccc;padding: 10px;float: left;
12         }
13         #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}
14     </style>
15 </style>
16 </head>
17 <body>
18     <div id="main">
19         <div id="div1"></div>
20         <div id="div2"></div>
21         <div id="div3"></div>
22     </div>
23     <input id="btn1" type="button" value="獲取">
24     <input id="btn2" type="button" value="設置">    
25     <input id="btn3" type="button" value="設置2">
26     <script type="text/javascript">
27         $(function(){
28             $('#btn1').click(function(){
29                 alert($("#div1").width())
30                 //width + padding
31                 alert($("#div1").innerWidth())
32                 //outerWidth()    width + padding + border
33                 alert($("#div1").outerWidth())
34             //outerWidth()    width + padding + border+margin
35                 alert($("#div1").outerWidth(true))
36             })
37             $('#btn2').click(function(){
38                 $("#div1").width(50)
39                 $('#div1').height(50)
40             })
41             
42             $('#btn3').click(function(){
43                 $("#main div").width(function(index,oldWidth){
44                     //alert(index)
45                     return oldWidth*(index+1)/5
46                 })
47             })
48         })
49     </script>
50 </body>
51 </html>

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9202160.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/280086.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/280086.shtml
英文地址，請注明出處：http://en.pswp.cn/news/280086.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！