امتیاز موضوع:
  • 9 رأی - میانگین امتیازات: 2.78
  • 1
  • 2
  • 3
  • 4
  • 5
تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت
#1
[تصویر:  text-x-java-icon.png]
تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت
امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت float و جاوا اسکرپت صحبت میکنیم. احتمالاً با خاصیت float در CSS آشنایی دارید. این خاصیت به ویژه وقتی مورد استفاده قرار میگیرد که طراح قصد داشته باشد بدون استفاده از جدولها چهارچوب صفحه را طراحی کند.
این خاصیت باعث میشود تا یک بلوک HTML بسته به مقداری که به این ویژگی داده میشود تا حد امکان در سمت چپ یا راست المنت والد آن نمایش داده شود، به طوری که سایر المنتها و متن موجود در المنت والد در اطراف بلوک مورد نظر قرار گیرند. توضیح بیشتر در مورد این خاصیت مربوط به بخش آموزش CSS هست بنابراین به همین مقدار توضیح بسنده میکنیم.
برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float برای این منظور استفاده کنیم.
برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد cssFloat استفاده میکنیم. برای درک بهتر میتوانید به مثال زیر در دو حالت قبل و بعد از اختصاص این ویژگی با به المنت توجه کنید:


کد:
<div style="border:1px #666 dashed; width:50%; margin:10px auto"> <div style="width:100px; height:100px; background: #fc0;">بلوک مورد نظر قبل از اختصاص ویژگی</div>
<p>این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود</p>
</div>


قبل از اختصاص ویژگی float:

[تصویر:  41309245745495008598.bmp]


کد مربوط به اعمال ویژگی با استفاده از جاوا اسکرپت:


کد:
<div style="border:1px #666 dashed; width:50%; margin:10px auto">
<div id="my-block-2" style="width:100px; height:100px; background: #fc0;">بلوک مورد نظر قبل از اختصاص ویژگی</div>
<p>این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود</p> <br clear="all">
</div>

<script type="text/javascript"> document.getElementById("my-block-2").style.cssFloat = "right"; </script>


و در انتها این چیزی هست که در مرورگر نمایش داده خواهد شد:


[تصویر:  99809198782555755560.bmp]



مقادیر زیر را میتوان برای متد cssFloat به کار برد:

noen :این مقدار پیش فرض متد هست و تأثیر
float را بر روی المنت خنثی میکند.
right :این مقدار باعث می شود تا بلوک مورد نظر تا حد امکان در سمن راست المنت والد خود قرار گیرد.left :این مقدار باعث میشود تا بلوک مورد نظر تا حد امکان در فضای سمت چپ المنت والد خود قرار گیرد.


در پایان این مقاله باید به این نکته اشاره کنم که مقادیر متد cssFloat از نوع رشته ای (String) هستند پس باید در کد جاوا اسکرپت در کوتیشن نوشته شوند.
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش کار با تاریخچه مرورگر با استفاده از جاوا اسکرپت انجمن مخ ها 0 319 01-09-2012، 08:28 PM
آخرین ارسال: انجمن مخ ها
  محاسبه فاکتوریل اعداد با استفاده از جاوا اسکرپت انجمن مخ ها 0 239 01-09-2012، 06:39 PM
آخرین ارسال: انجمن مخ ها
  معرفی جاوا اسکریپت انجمن مخ ها 0 187 01-09-2012، 12:33 AM
آخرین ارسال: انجمن مخ ها
  تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت انجمن مخ ها 0 287 28-08-2012، 12:10 AM
آخرین ارسال: انجمن مخ ها
  دستور شرطی switch در جاوا اسکرپت انجمن مخ ها 0 249 27-08-2012، 11:39 PM
آخرین ارسال: انجمن مخ ها
  نوشتن متن با استفاده از جاوا اسکرپت انجمن مخ ها 0 256 27-08-2012، 11:23 PM
آخرین ارسال: انجمن مخ ها
  نمایش پیام هشدار در صفحه با استفاده از جاوا اسکرپت انجمن مخ ها 0 207 27-08-2012، 11:03 PM
آخرین ارسال: انجمن مخ ها
  نحوه استفاده از کدهای جاوا اسکرپت در صفحه انجمن مخ ها 0 241 27-08-2012، 09:46 PM
آخرین ارسال: انجمن مخ ها
  آموزش جاوا اسکرپت انجمن مخ ها 0 205 27-08-2012، 09:35 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان