امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت
float و جاوا اسکرپت صحبت میکنیم. احتمالاً با خاصیت float در CSS آشنایی
دارید. این خاصیت به ویژه وقتی مورد استفاده قرار میگیرد که طراح قصد داشته
باشد بدون استفاده از جدولها چهارچوب صفحه را طراحی کند.
این خاصیت باعث میشود تا یک بلوک HTML بسته به مقداری که به این ویژگی
داده میشود تا حد امکان در سمت چپ یا راست المنت والد آن نمایش داده شود،
به طوری که سایر المنتها و متن موجود در المنت والد در اطراف بلوک مورد نظر
قرار گیرند. توضیح بیشتر در مورد این خاصیت مربوط به بخش آموزش CSS هست
بنابراین به همین مقدار توضیح بسنده میکنیم.
برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده
می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی
رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float
برای این منظور استفاده کنیم.
برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی
float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد
cssFloat استفاده میکنیم.
امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت
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:
بلوک مورد نظر قبل از اختصاص ویژگی
این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود
کد مربوط به اعمال ویژگی با استفاده از جاوا اسکرپت:
<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) هستند پس باید در کد جاوا اسکرپت در کوتیشن نوشته
شوند.
