کاربرد 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
، عرض این عنصر را خوانده و در صفحه نمایش داده ایم :
<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
، عرض این عنصر را به یک مقدار جدید تغییر داده ایم :
<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>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :