به دست آوردن اندازه ارتفاع (Height) و عرض (Width) سند HTML (انگلیسی : HTML Document)، با روش های width و height ، در jQuery
با استفاده از روش های width و height در jQuery ، می توانیم اندازه ارتفاع (Height) و عرض (Width) سند HTML (انگلیسی : HTML Document) را به دست آوریم. برای این منظور، باید آنها را به صورت زیر به کار ببریم :
xxxxxxxxxx$(document).width()$(document).height()به مثال زیر توجه کنید :
یک دکمه (Button) در صفحه HTML می سازیم که با کلیک کاربر بر روی آن، یک سری کد jQuery اجرا می شوند که برای محاسبه اندازه ارتفاع (Height) و عرض (Width) سند HTML (انگلیسی : HTML Document)، به کار رفته و نتیجه را هم در بخشی از صفحه HTML نمایش می دهند.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <script src="jquery-1.11.1.min.js"></script> </head> <body> <button id="kelidestan_button"> Button </button> <p id="kelidestan_result"> </p> <script> $(document).ready(function(){ $("#kelidestan_button").click(function(){ var w = $(document).width(); var h = $(document).height(); var text = "Width: " + w + "<br>" +"Height: " + h; $("#kelidestan_result").html(text); }); }); </script> </body></html>در صفحه HTML ، یک تگ p با id برابر kelidestan_result داریم که نتیجه محاسبات در آن نمایش داده می شود (پس از اجرای کدهای jQuery) :
xxxxxxxxxx<p id="kelidestan_result"></p>کدهای jQuery ، پس ازکلیک بر روی دکمه (Button) ساخته شده توسط تگ button (با id برابر kelidestan_button)، اجرا خواهند شد :
xxxxxxxxxx<button id="kelidestan_button"> Button</button>کدهای jQuery صفحه عبارتند از :
xxxxxxxxxx<script> $(document).ready(function(){ $("#kelidestan_button").click(function(){ var w = $(document).width(); var h = $(document).height(); var text = "Width: " + w + "<br>" +"Height: " + h; $("#kelidestan_result").html(text); }); });</script>بنابراین پس از کلیک بر روی دکمه (Button)، کدهای jQuery زیر اجرا می شوند ( آموزش شماره 2787 ) :
xxxxxxxxxxvar w = $(document).width();var h = $(document).height();var text = "Width: " + w + "<br>" +"Height: " + h;$("#kelidestan_result").html(text);در کدهای بالا، ابتدا اندازه ارتفاع (Height) و عرض (Width) سند HTML (انگلیسی : HTML Document) را محاسبه نموده و سپس متنی را بر اساس نتایج محاسبات، در عنصر دارای id برابر kelidestan_result از صفحه، نمایش داده ایم (با روش html).
نتیجه :
بر روی دکمه (Button) کلیک کنید :
