jQuery中幾個關於元素寬高方法的區別
阿新 • • 發佈：2018-10-15
contain ext 參數設置 oct ont doctype asc jquer cloud 幾個關於元素寬高的方法
- height():帶參數設置，不帶參數獲取,參數是number類型
- width():帶參數設置，不帶參數獲取,參數是number類型
- innerHeight() :內邊距+內容的高度
- innerWidth() :內邊距+內容的寬度
- outerHeight：上下內邊距+內容+上下邊框
- outerWidth :左右內邊距+內容+左右邊框
案例測試：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素寬度與高度</title> <style type="text/css"> #container{ width:200px; height:200px; padding:20px; margin:30px; border:5px solid red; } </style> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function(){ console.log("width():"+$("#container").width()); console.log("height():"+$("#container").height()); console.log("innerWidth()"+$("#container").innerWidth()); console.log("innerHeight():"+$("#container").innerHeight()); console.log("outerWidth():"+$("#container").outerWidth()); console.log("outerHeight():"+$("#container").outerHeight()); }) </script> </head> <body> <div id = "container"></div> </body> </html>
運行結果：
最後歡迎關註博主的網絡課堂：http://edu.51cto.com/lecturer/11220344.html
jQuery中幾個關於元素寬高方法的區別