017_尺寸
1. jQuery提供多個處理尺寸的重要方法: width()、height()、innerWidth()、innerHeight()、outerWidth()和outerHeight()。
2. width()方法
2.1. width()方法返回或設置匹配元素的寬度(不包括內邊距、邊框或外邊距)。
2.2. 返回寬度
2.2.1. 返回以像素計的第一個匹配元素的寬度。
2.2.2. 語法
$(selector).width()2.3. 設置寬度
2.3.1. 設置所有匹配元素的寬度。
2.3.2. 語法
$(selector).width(length)2.3.3. 參數
2.4. 使用函數來設置寬度
2.4.1. 使用函數來設置所有匹配元素的寬度。
2.4.2. 語法
$(selector).width(function(index,oldwidth))2.4.3. 參數
3. height()方法
3.1. height()方法返回或設置匹配元素的高度(不包括內邊距、邊框或外邊距)。
3.2. 返回高度
3.2.1. 返回以像素計的第一個匹配元素的高度。
3.2.2. 語法
$(selector).height()3.3. 設置高度
3.3.1. 設置所有匹配元素的高度。
3.3.2. 語法
$(selector).height(length)3.3.3. 參數
3.4. 使用函數來設置高度
3.4.1. 使用函數來設置所有匹配元素的高度。
3.4.2. 語法
$(selector).height(function(index,oldheight))3.4.3. 參數
4. innerWidth()和innerHeight()方法
4.1. innerWidth()方法返回元素的寬度(包括內邊距)。
4.2. innerHeight()方法返回元素的高度(包括內邊距)。
5. outerWidth()和outerHeight()方法
5.1. outerWidth()方法返回元素的寬度(包括內邊距和邊框)。
5.2. outerHeight()方法返回元素的高度(包括內邊距和邊框)。
5.3. outerWidth(true)方法返回元素的寬度(包括內邊距、邊框和外邊距)。
5.4. outerHeight(true)方法返回元素的高度(包括內邊距、邊框和外邊距)。
6. 例子
6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>尺寸</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#p1").width(300);});$('#btn2').click(function(){$("p").width(function(index, oldwidth){if(index == 1) return 300;});});$('#btn3').click(function(){alert($("#p1").width());});$('#btn4').click(function(){$("#p1").height(50);});$('#btn5').click(function(){$("p").height(function(index, oldheight){if(index == 1) return 50;});});$('#btn6').click(function(){alert($("#p1").height());});$('#btn7').click(function(){alert($("#p1").innerWidth());});$('#btn8').click(function(){alert($("#p1").innerHeight());});$('#btn9').click(function(){alert($("#p1").outerWidth());});$('#btn10').click(function(){alert($("#p1").outerHeight());});$('#btn11').click(function(){alert($("#p1").outerWidth(true));});$('#btn12').click(function(){alert($("#p1").outerHeight(true));});});</script><style type="text/css">p {background-color: red; padding: 20px; margin: 10px; border: solid 1px;}</style></head><body><p id="p1">width()方法返回或設置匹配元素的寬度。</p><p id="p2">height()方法返回或設置匹配元素的高度。</p><button id="btn1">設置寬度</button> <button id="btn2">使用函數來設置寬度</button> <button id="btn3">返回寬度</button><br/ ><br/ ><button id="btn4">設置高度</button> <button id="btn5">使用函數來設置高度</button> <button id="btn6">返回高度</button><br/ ><br/ ><button id="btn7">元素的寬度</button> <button id="btn8">元素的高度</button> <button id="btn9">元素的寬度(包括內邊距和邊框)</button><br/ ><br/ ><button id="btn10">元素的高度(包括內邊距和邊框)</button> <button id="btn11">元素的寬度(包括內邊距、邊框和外邊距)</button> <button id="btn12">元素的高度(包括內邊距、邊框和外邊距)</button></body> </html>6.2. 運行效果圖
6.3. 點擊設置寬度按鈕
6.4. 點擊使用函數來設置寬度按鈕
6.5. 點擊返回寬度按鈕
6.6. 點擊設置高度按鈕
6.7. 點擊使用函數來設置高度按鈕
6.8. 點擊返回高度按鈕
6.9. 點擊元素的寬度按鈕
6.10. 點擊元素的高度按鈕
6.11. 點擊元素的寬度(包括內邊距和邊框)按鈕
6.12. 點擊元素的高度(包括內邊距和邊框)按鈕
6.13. 點擊元素的寬度(包括內邊距、邊框和外邊距)按鈕
6.14. 點擊元素的高度(包括內邊距、邊框和外邊距)按鈕
7. width()和height()返回文檔和窗口(瀏覽器視口)的寬度和高度
7.1. $(document).width()返回文檔的寬度。
7.2. $(document).height()返回文檔的高度。
7.3. $(window).width()返回窗口(瀏覽器視口)的寬度。
7.4. $(window).height()返回窗口(瀏覽器視口)的高度。
7.5. 例子
7.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>尺寸</title><style type="text/css">body{margin: 0; padding: 0;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('body').append('文檔的寬度: ' + $(document).width() + '<br />');$('body').append('文檔的高度: ' + $(document).height() + '<br />');$('body').append('窗口(瀏覽器視口)的寬度(不包含滾動條寬度): ' + $(window).width() + '<br />');$('body').append('窗口(瀏覽器視口)的高度(不包含滾動條高度): ' + $(window).height() + '<br />');$('body').append('窗口(瀏覽器視口)的寬度(包含滾動條寬度): ' + $(window).outerWidth() + '<br />');$('body').append('窗口(瀏覽器視口)的高度(包含滾動條高度): ' + $(window).outerHeight() + '<br /><br />');$('body').append('瀏覽器窗口的內寬度(包含滾動條寬度): ' + window.innerWidth + '<br />');$('body').append('瀏覽器窗口的內高度(包含滾動條高度): ' + window.innerHeight + '<br />');$('body').append('訪問者屏幕寬度: ' + screen.width + '<br />');$('body').append('訪問者屏幕的高度: ' + screen.height + '<br />');$('body').append('訪問者屏幕的可用寬度: ' + screen.availWidth + '<br />');$('body').append('訪問者屏幕的可用高度: ' + screen.availHeight + '<br />');});</script></head><body style="width: 2000px; height: 3000px; background: red;"></body> </html>7.5.2. 效果圖
?
總結
- 上一篇： 016_css()方法
- 下一篇： 018_位置和偏移