نحوه استایل دهی عناصر در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استایل دهی عناصر در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه استایل دهی عناصر در جاوا اسکریپت
ما میدونیم که زبان CSS زبانی است که با استفاده از اون میتونیم به عناصر ( تگ های ) موجود در صفحه استایل بدیم ( شکل و شمایل ، رنگ بندی و… )
حال سوال اینجاست که آیا با جاوا اسکریپت هم میشه برای عناصر استایل تعریف کرد!؟ در جواب باید بگم بله که میشه و ما در این جلسه میخوایم یاد بگیریم که چجوری اینکارو انجام بدیم.
پس وقتی در جاوااسکریپت میگیم استایل دادن به عناصر ، دیگه اینو بطور کلی بدونید یعنی عملا کار با ویژگی های عناصر، و کار با ویژگی های عناصر یعنی عملا تغییر دادن / ایجاد کردن استایل بروی عناصر می باشد.
خب ما کلی ویژگی داریم در CSS ، که پیشنهاد میکنم حتما لیست کامل ویژگی های CSS رو مشاهده نمایید، بفرض مثال یه ویژگی داریم به اسم color ، که با استفاده از اون میتونیم رنگ متن یک عنصر رو مشخص کنیم، به همین راحتی!
حال شکل کلی برای ایجاد / تغییر استایل عناصر در جاوا اسکریپت بصورت زیر می باشد :
1 |
Element.style.property = " Value_Property "; |
- Element : اون عنصری که میخوایم استایل بهش بدیم
- style : یک کلمه کلیدی هست که یعنی میخوایم استایل بدیم
- property : اون ویژگی که میخوایم اعمال بشه
- Value_Property : مقدار اون ویژگی سی اس اس که میخوایم اعمال بشه
Free-Learn
نحوه نوشتن استایل در جاوا اسکریپت
برای استایل دادن به عناصر توسط جاوا اسکریپت یه چندتا قانون کوچیک داریم که میگه :
- هیچ فاصله ای بین نام ویژگی نباید باشه
- ویژگی های ۲ کلمه ای ، همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه
- ویژگی های ۱ کلمه ای همیشه باید با حروف کوچک انگلیسی نوشته شن
مثال :
1 2 3 4 |
backgroundColor // دو کلمه ای backgroundImage // دو کلمه ای zIndex // دو کلمه ای color // یک کلمه ای |
و هر ویژگی دیگه ای که ۲ کلمه ای باشد ، دیگه حواستون باشه باید حرف اول از کلمه ی دوم رو با حروف بزرگ انگلیسی نوشت.
Free-Learn
مثال های مختلف از استایل دادن به عناصر در جاوا اسکریپت
مثال شماره ۱ : با کلیک بروی دکمه رنگ زمینه و رنگ متن صفحه تغییر پیدا میکند
1 2 3 4 5 6 7 8 |
<script> function Change(){ document.body.style.backgroundColor = "#282C34"; document.body.style.color = "#fff"; } </script> |
مثال شماره ۲ : با کلیک بروی یک دکمه باکس متن مخفی می شود و با کلیک بروی دکمه دیگر نمایش داده میشود
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function show(){ var mybox = document.getElementById("MyBox"); mybox.style.display = "block"; } function hide(){ var mybox = document.getElementById("MyBox"); mybox.style.display = "none"; } </script> |
مثال شماره ۳ : با کلیک بروی ۱ دکمه متن موجود در باکس هم مخفی میشود و هم نمایش داده میشود. ( کاربر روش کلیک میکنه مخفی میشه بعد دوباره که کلیک کنه نمایش داده میشه )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function show_hide(){ var mybox = document.getElementById("MyBox"); var btn = document.getElementById("Mybtn"); if(mybox.style.display == "none"){ mybox.style.display = "block"; btn.innerHTML="مخفی کن"; } else{ mybox.style.display = "none"; btn.innerHTML="نمایش بده"; } } </script> |
مثال شماره ۴ : قرار دادن تصویر برای زمینه صفحه
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function set_color(){ document.body.style.backgroundImage = "none"; document.body.style.backgroundColor = "#9C27B0"; document.body.style.color = "#fff"; } function set_image(){ document.body.style.backgroundColor = "transparent"; document.body.style.backgroundImage = "url('bg-1.jpg')"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundSize = "cover"; } </script> |
Free-Learn
نکات و توضیحات
- ویژگی هایی که ۲ کلمه ای هستند ( مثه backgroundColor )، همیشه حرف اول از کلمه ی دوم باید با حروف بزرگ انگلیسی نوشته شود.
- ویژگی هایی که ۱ کلمه ای هستند ( مثه color ) همیشه باید بطور کامل با حروف کوچک انگلیسی نوشته شود.
- نباید هیچ فاصله ای بین مقداری که وارد میکنید وجود داشته باشد.
- در آموزش هر یک از ویژگی های CSS در قسمت » جدول مشخصات ویژگی ، میتونید نحوه استفاده از همون ویژگی رو در جاوااسکریپت مشاهده نمایید. ( مشاهده نمونه )