js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
生活随笔
收集整理的這篇文章主要介紹了
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
js進階 11-6? jquery如何獲取和設置元素的寬高（jquery多方法）
一、總結(jié)
一句話總結(jié)：jquery里面多是方法啊，比如jquery對象的寬高。所以取值是方法，賦值就是方法里面帶參數(shù)。
?
1、百度富文本編輯器ueditor如何設置寬高？
jquery對象的width()和height()方法
37 $('#btn2').click(function(){ 38 $("#div1").width(50) 39 $('#div1').height(50) 40 })?
2、juqery對象的寬高對應的三個方法是什么，分別表示什么意思？
元素的寬度高度
?
3、juqery對象如何設置一個表示全副武裝的寬度（包括相關的一切）？
outerWidth()方法加true參數(shù)
34 //outerWidth() width + padding + border+margin 35 alert($("#div1").outerWidth(true))?
4、juqery對象的innerWidth()方法包括的是哪個邊距？
內(nèi)邊距? padding
?
5、jquery的匿名函數(shù)中的index參數(shù)表示什么意思？
因為jquery對象多是集合，所以index就是表示所選元素的下標
43 $("#main div").width(function(index,oldWidth){ 44 //alert(index) 45 return oldWidth*(index+1)/5 46 })?
?
二、jquery如何獲取和設置元素的寬高
1、相關知識
元素的寬度高度
?
?
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>?
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9202160.html
總結(jié)
以上是生活随笔為你收集整理的js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人生命运
- 下一篇： Chrome 过滤广告插件暂替办法