متدهای width و height و innerWidth و outerWidth در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی متدهای width و height و innerWidth و outerWidth در جی کوئری

دانلود فیلم و آموزش ویدئویی متدهای width و height و innerWidth و outerWidth در جی کوئری . در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری از تاپ سایت 98 قصد داریم به آموزش متدهای width و innerWidth و outerWidth و height و innerHeight و outerHeight در جی کوئری بپردازیم. با ذکر چندین مثال متدها و دستورات را یاد خواهید گرفت.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

متد width و height در جی کوئری

متد width در جی کوئری ، عرض صفحه یا عنصر انتخاب شده را نمایش می دهد.

متد height در جی کوئری ، ارتفاع صفحه یا عنصر انتخاب شده را برمی گرداند.

در مثال زیر یک باکس با div ایجاد کردیم. سپس با جی کوئری عرض و ارتفاع آن را نمایش دادیم.

خروجی مثال زیر عرض و ارتفاع div می باشد.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 7px;
border: 3px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<div id="div1"></div>
<button>Display</button>
</body>
</html>

متدهای innerWidth و innerHeight در جی کوئری

متد innerWidth در جی کوئری ، عرض صفحه یا عنصر انتخاب شده و padding را برمی گرداند.

متد innerWidth در جی کوئری ، ارتفاع صفحه یا عنصر انتخاب شده و padding را برمی گرداند.

در مثال زیر عرض باکس 300 پیکسل می باشد و اندازه padding برابر 10 پیکسل می باشد و چون دو طرف محاسبه می شود پس مقدار 320 را برمی گرداند.

همچنین ارتفاع باکس 100 پیکسل می باشد و اندازه padding برابر 10 پیکسل می باشد و چون دو طرف محاسبه می شود پس مقدار 120 را برمی گرداند.

مثال

txt += "Width of div: " + $("#div1").innerWidth() + "</br>";
txt += "Height of div: " + $("#div1").innerHeight();

متدهای outerWidth و outerHeight در جی کوئری

متد outerWidth در جی کوئری ، عرض صفحه یا عنصر انتخاب شده و padding و کادر را برمی گرداند.

متد outerHeight در جی کوئری ، ارتفاع صفحه یا عنصر انتخاب شده و padding و کادر را برمی گرداند.

در مثال زیر عرض باکس 300 پیکسل می باشد و اندازه padding برابر 10 پیکسل و کادر برابر 3 پیکسل می باشد و چون دو طرف محاسبه می شود پس مقدار 326 را برمی گرداند.

همچنین ارتفاع باکس 100 پیکسل می باشد و اندازه padding برابر 10 پیکسل و کادر برابر 3 پیکسل می باشد و چون دو طرف محاسبه می شود پس مقدار 126 را برمی گرداند.