تبلیغات متنی و بنر

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

متد ( ) width در jQuery :

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

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

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

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

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

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

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

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

Example
<img src="../Pic/Icons/JQ1.jpg" id="Img1" width="70px" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.width.3/jquery.min.js">
</script>

<script type="text/javascript">
    $(document).ready(function () {
                document.getElementById("EX").innerHTML = "عرض عنصر : " + $("#Pic_1").width();
      });
</script>
<p id="EX">       </p>
کد

خروجی

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

گفتیم که در حالت دوم متد ( ) width ، از این متد برای تنظیم مقدار عرض یک عنصر به یک مقدار جدید استفاده می شود . شکل کلی استفاده از متد ( ) width در حالت دوم به شرح زیر است :

Syntax $ ( " selector " ).width ( value ) ;
* value : مقدار مورد نظر

مثال : در مثال زیر یک تصویر در مثال داریم . با استفاده از متد width ، عرض این عنصر را به یک مقدار جدید تغییر داده ایم :

Example
<img src="../Pic/Icons/JQ1.jpg" id="Img1" width="70px" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.width.3/jquery.min.js">
</script>

<script type="text/javascript">
    $(document).ready(function () {
           $("#Pic_2").width( "200px");
      });
</script>

کد
خروجی

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

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

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

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