- 15天學(xué)會(huì)jQuery編程與實(shí)戰(zhàn)（視頻教學(xué)版） （Web前端技術(shù)叢書）
- 劉鑫
- 380字
- 2020-11-28 16:21:49
4.4 更改元素或窗口的大小
通過(guò)jQuery可以很容易地處理元素和瀏覽器窗口的尺寸，提供以下6種方法。
● width()：設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
● height()：設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
● innerWidth()：返回元素的寬度（包括內(nèi)邊距）。
● innerHeight()：返回元素的高度（包括內(nèi)邊距）。
● outerWidth()：返回元素的寬度（包括內(nèi)邊距和邊框）。
● outerHeight()：返回元素的高度（包括內(nèi)邊距和邊框）。
比較上述幾種方法，可以通過(guò)圖4.7了解。
圖4.7 獲取尺寸的對(duì)比
【示例4-4】dimension.html
01 <script>
02 $(document).ready(function(){
03 $("button").click(function(){
04 var txt = "";
05 txt += "div的寬/高： " + $("#div1").width();
06 txt += "x" + $("#div1").height() + "\n";
07 txt += "文檔的寬/高： " + $(document).width();
08 txt += "x" + $(document).height() + "\n";
09 txt += "窗口的寬/高： " + $(window).width();
10 txt += "x" + $(window).height();
11 alert(txt);
12 });
13 });
14 </script>
15
16 <body>
17 <div id="div1"></div>
18 <button>高度和寬度</button>
19 </body>
20 </html>
第04～10行分別獲取div、文檔和窗口的寬度和高度。這里要注意div并沒(méi)有設(shè)置寬度。本示例在瀏覽器中打開后，單擊“高度和寬度”按鈕，效果如圖4.8所示。
圖4.8 獲取高度和寬度
推薦閱讀
- Expert C++
- Building a Home Security System with Raspberry Pi
- Django：Web Development with Python
- Learning SQLite for iOS
- Android NDK Beginner’s Guide
- Hands-On C++ Game Animation Programming
- Unity 5.x By Example
- PySide GUI Application Development（Second Edition）
- INSTANT Django 1.5 Application Development Starter
- Elasticsearch for Hadoop
- Visual C#.NET程序設(shè)計(jì)
- Mastering JavaScript Design Patterns（Second Edition）
- 深入理解Elasticsearch（原書第3版）
- Learning Concurrent Programming in Scala
- Java程序設(shè)計(jì)案例教程