تبلیغات

Use Advanced Search

آموزش کامپیوتر به زبان ساده - تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت
صفایی ندارد ارسطو شدن، خوشا پر گشودن پرستو شدن...

تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت

سه شنبه 23 آذر 1389 01:31 ق.ظ

نویسنده : reza ghaffari
ارسال شده در: آموزش جاوا اسکرپت ،

احتمالاً با خاصیت 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:


ارتباط آنلاین با رضا غفاری

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

بلوک مورد نظر قبل از اختصاص ویژگی

این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود

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

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

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

بلوک مورد نظر پس از اختصاص ویژگی

این متن پس از اختصاص ویژگی به المنت در کنار بلوک نمایش داده میشود


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

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

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


ارتباط آنلاین با رضا غفاری


دیدگاه ها : نظرات
دنبالک ها: منبع:نئوپرشیا ،
آخرین ویرایش: یکشنبه 28 آذر 1389 08:23 ق.ظ