کاربرد jQuery در HTML - متد ( ) height
متد ( ) height در jQuery :
متد ( ) height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند
و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید .
برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد
( ) height می توان دو کار را انجام داد :
- مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .
- مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید .
نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد ( ) height
شامل حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر ( border
) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .
استفاده از متد ( ) height در حالت اول - خواندن ارتفاع یک عنصر :
گفتیم که در حالت اول متد ( ) height ، از این متد برای خواندن مقدار ارتفاع یک عنصر
و بازگرداندن آن مقدار به صفحه استفاده می شود . شکل کلی استفاده از متد ( ) height
در حالت اول به شرح زیر است :
|
Syntax
|
$ ( " selector " ).height ( ) ;
|
مثال : در مثال زیر یک تصویر در مثال داریم . با استفاده از متد height
، ارتفاع این عنصر را خوانده و در صفحه نمایش داده ایم :
<img src="../Pic/Icons/JQ1.jpg" id="Img1" height="70px" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.height.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("EX").innerHTML
= "ارتفاع عنصر : " + $("#Pic_1").height();
});
</script>
<p id="EX"> </p>
|
|
استفاده از متد ( ) height در حالت دوم - تنظیم ارتفاع یک عنصر :
گفتیم که در حالت دوم متد ( ) height ، از این متد برای تنظیم مقدار ارتفاع یک عنصر
به یک مقدار جدید استفاده می شود . شکل کلی استفاده از متد ( ) height در حالت دوم
به شرح زیر است :
|
Syntax
|
$ ( " selector " ).height ( value ) ;
* value : مقدار مورد نظر
|
مثال : در مثال زیر یک تصویر در مثال داریم . با استفاده از متد height
، ارتفاع این عنصر را به یک مقدار جدید تغییر داده ایم :
<img src="../Pic/Icons/JQ1.jpg" id="Img1" height="70px" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.height.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#Pic_2").height(
"200px");
});
</script>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :