صفحه اصلی وب سايت واقعآ محشر تماس با ما

طراحي حرفه اي وب سايت : طراحي وب سايت خود را به گروه فناوري اطلاعات ايران بسپاريد

طراحي وب سايت طراحي حرفه اي وب سايت بهينه سازي وب سايت

تنظیم خاصیت 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:

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

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

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

<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) هستند پس باید در کد جاوا اسکرپت در کوتیشن نوشته شوند.


نظرات بازدید کنندگان
Thu, 16 Apr 2009 12:04:11 +0430 نویسنده : ناهيد
سلام  مطالب مربوط به آموزش css و java عالي بود خيلي بهم كمك كرد ازت ممنونم موفق باشي
 
Thu, 18 Dec 2008 00:39:07 +0330 نویسنده : خاني
سلام اگه ممكنه كد جاوايي معرفي كنيد كه مثلا صفحات يك سايت را در يك فريم جداگانه نمايش بده و اندازه اون فريم بسته به صفحهاي كه ميخواد نمايش بده اتوماتيك تنظيم بشه و نوار نداشته باشه
و همچني چطور يك نوار ابزار مثلا سايت شما داشته باشيم كه كاربر روي هر قسمت كليك كرد عنوانها پايين نمايش داده بشن
ممنون
 
Fri, 05 Dec 2008 11:06:44 +0330 نویسنده : عبدالرضا
با سلام مطالب را مطا لعه کردم جلب بود
ومثمر ثمر
آگه میشه نحوه طراحی سیستمهای مدیریت محتوا را بگذارید
ویا فروشگاه اینترنتی
با تشکر
من مبتدی هستم
 
Wed, 03 Dec 2008 19:27:33 +0330 نویسنده : نعیم
با سلام مطالب HTML و Css خیلی خوب بود ولی در جاوا اسکریپت فکر کنم خیلی کلی صحبت کردید.
 
Sun, 09 Nov 2008 13:11:57 +0330 نویسنده : حمیدرضا
با سلام
اگه امکان داره کد هایی که با استفاده از آنها میتوان به صفحه جاری مطلب یا تگ  اضافه کرد را توضیح دهید.
فکر کنم کد مربوطه inner باشه.
 
Tue, 14 Oct 2008 00:01:57 +0330 نویسنده : امیر
سلام مطالب را خواندم  کاربردی و عالی بود .اتفاقا مشکل اصلی ما ها در راه افتادن اولیه هست که منابع خوبی برای آن وجود ندارد .خیلی از مطالب خوبتان ممنون
 
Sun, 28 Sep 2008 16:03:48 +0330 نویسنده : حبیب
با سلام و تشکر من هنوز مطالب را نخوانده ام ولی فکر می کنم در حد یک کاربر مبتدی باشد