آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

کاربرد jQuery در HTML - متد ( ) height

متد ( ) height در jQuery :

متد ( ) height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید .
برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد ( ) height می توان دو کار را انجام داد :

  1. مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .
  2. مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید .

نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد ( ) height شامل حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر ( border ) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .

نمایش height عنصر در jQuery

استفاده از متد ( ) height در حالت اول - خواندن ارتفاع یک عنصر :

گفتیم که در حالت اول متد ( ) height ، از این متد برای خواندن مقدار ارتفاع یک عنصر و بازگرداندن آن مقدار به صفحه استفاده می شود . شکل کلی استفاده از متد ( ) height در حالت اول به شرح زیر است :

Syntax $ ( " selector " ).height ( ) ;

مثال : در مثال زیر یک تصویر در مثال داریم . با استفاده از متد height ، ارتفاع این عنصر را خوانده و در صفحه نمایش داده ایم :

Example
<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 ، ارتفاع این عنصر را به یک مقدار جدید تغییر داده ایم :

Example
<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>


کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟