عناصر HTML

امروز با در خواست يکي از بازديد کنندگان در مورد خاصيت float و جاوا اسکرپت صحبت ميکنيم. احتمالاً با خاصيت float در 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) هستند پس بايد در کد جاوا اسکرپت در کوتيشن نوشته شوند.