آموزش jQuery - متد width

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

متد ( ) width در jQuery :

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

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

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

استفاده از متد ( ) 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 :

نظر شما :

سوال امنیتی : جمع سه + پنج چنده ؟