این آموزش در تاریخ ۱۴۰۱/۰۴/۲۰ آپدیت شده است.
نحوه استایل دهی عناصر در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استایل دهی عناصر در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه استایل دهی عناصر در جاوا اسکریپت
ما میدونیم که زبان CSS زبانی است که با استفاده از اون میتونیم به تگ های موجود در صفحه استایل بدیم ( شکل و شمایل ، رنگ بندی و بطور کلی تزئینات صفحه )
حال سوال اینجاست که آیا با جاوا اسکریپت هم میشه برای تگ ها استایل تعریف کرد!؟ بله که میشه، از همون ویژگی های CSS در جاوا اسکریپت هم میشه استفاده کرد.
خب ما کلی ویژگی داریم در CSS ، که پیشنهاد میکنم حتما لیست کامل ویژگی های CSS رو مشاهده نمایید، بفرض مثال یه ویژگی داریم به اسم color ، که با استفاده از اون میتونیم رنگ متن یک عنصر رو مشخص کنیم، به همین راحتی!
پس در مجموع خیلی راحت ما میتونیم از ویژگی های زبان CSS در زبان جاوا اسکریپت استفاده کنیم و به تگ هامون استایل بدیم.
درسته که از طریق زبان جاوا اسکریپت میتونیم به تگ هامون استایل بدیم ، ولی یادتون باشه برای استایل دادن باید از زبان CSS که کلا برای اینکار ایجاد شده استفاده کرد، استفاده زیاد و بی رویه از جاوا اسکریپت برای استایل دادن به تگ های درون صفحه کار اشتباه و غیراستانداردی می باشد.
حال شکل کلی برای ایجاد / تغییر استایل عناصر در جاوا اسکریپت بصورت زیر می باشد :
|
1 |
Element.style.property = " Value_Property "; |
- Element : اون تگی که میخوایم استایل بهش بدیم
- style : یک کلمه کلیدی هست که یعنی میخوایم استایل بدیم
- property : اون ویژگی که میخوایم رو تگ اعمال بشه
- Value_Property : مقدار اون ویژگی که میخوایم رو تگ اعمال بشه
Free-Learn
نحوه نوشتن استایل در جاوا اسکریپت
برای استایل دادن به عناصر توسط جاوا اسکریپت یه چندتا قانون کوچیک داریم که میگه :
- هیچ فاصله ای بین نام ویژگی نباید باشه
- ویژگی های ۲ کلمه ای ، همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه
- ویژگی های ۱ کلمه ای همیشه باید با حروف کوچک انگلیسی نوشته شن
مثال :
|
1 2 3 4 5 |
backgroundColor // دو کلمه ای backgroundImage // دو کلمه ای zIndex // دو کلمه ای color // یک کلمه ای display // یک کلمه ای |
دیگه حواستون باشه، ویژگی های ۲کلمه ای باید حرف اول از کلمه ی دوم رو با حروف بزرگ انگلیسی نوشت.
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 14 15 |
<script> function Show_Hide(){ var MyBox = document.getElementById("MyBox"); var MyButton = document.getElementById("MyButton"); if(MyBox.style.display == "none"){ MyBox.style.display = "block"; MyButton.innerHTML = "مخفی کن"; }else{ MyBox.style.display = "none"; MyButton.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 = "#282c34"; document.body.style.color = "#fff"; } function set_image(){ document.body.style.backgroundColor = "transparent"; document.body.style.backgroundImage = "url('files/bg-1.jpg')"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundSize = "cover"; } </script> |
مثال شماره ۴ : کاربر میتونه از باکس رنگ ، یه رنگ دلخواه انتخاب کنه برای رنگ زمینه و رنگ متن
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function set_bg_color(){ var BG_Color = document.getElementById("BGC").value; document.body.style.backgroundColor = BG_Color; } function set_text_color(){ var Text_Color = document.getElementById("TXTC").value; document.body.style.color = Text_Color; } </script> |
Free-Learn
نکات و توضیحات
- ویژگی هایی که ۲ کلمه ای هستند ( مثه backgroundColor )، همیشه حرف اول از کلمه ی دوم باید با حروف بزرگ انگلیسی نوشته شود.
- ویژگی هایی که ۱ کلمه ای هستند ( مثه color ) همیشه باید بطور کامل با حروف کوچک انگلیسی نوشته شود.
- نباید هیچ فاصله ای بین مقداری که وارد میکنید وجود داشته باشد.
- در آموزش هر یک از ویژگی های CSS در قسمت » جدول مشخصات ویژگی ، میتونید نحوه استفاده از همون ویژگی رو در جاوااسکریپت مشاهده نمایید. ( مشاهده نمونه )
