خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت نحوه استایل دهی عناصر در جاوا اسکریپت

نحوه استایل دهی عناصر در جاوا اسکریپت

توسط

۱۳۹۹-۱۰-۱۵

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استایل دهی عناصر در جاوا اسکریپت با من همراه باشید.

نحوه استایل دهی عناصر در جاوا اسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 نحوه استایل دهی عناصر در جاوا اسکریپت
2 نحوه نوشتن استایل در جاوا اسکریپت
3 مثال های مختلف از استایل دادن به عناصر در جاوا اسکریپت
4 نکات و توضیحات

نحوه استایل دهی عناصر در جاوا اسکریپت

ما میدونیم که زبان CSS زبانی است که با استفاده از اون میتونیم به عناصر ( تگ های ) موجود در صفحه استایل بدیم ( شکل و شمایل ، رنگ بندی و… )

حال سوال اینجاست که آیا با جاوا اسکریپت هم میشه برای عناصر استایل تعریف کرد!؟ در جواب باید بگم بله که میشه و ما در این جلسه میخوایم یاد بگیریم که چجوری اینکارو انجام بدیم.

پس وقتی در جاوااسکریپت میگیم استایل دادن به عناصر ، دیگه اینو بطور کلی بدونید یعنی عملا کار با ویژگی های عناصر، و کار با ویژگی های عناصر یعنی عملا تغییر دادن / ایجاد کردن استایل بروی عناصر می باشد.

خب ما کلی ویژگی داریم در CSS ، که پیشنهاد میکنم حتما لیست کامل ویژگی های CSS رو مشاهده نمایید، بفرض مثال یه ویژگی داریم به اسم color ، که با استفاده از اون میتونیم رنگ متن یک عنصر رو مشخص کنیم، به همین راحتی!

حال شکل کلی برای ایجاد / تغییر استایل عناصر در جاوا اسکریپت بصورت زیر می باشد :

Element.style.property = " Value_Property ";

1	Element.style.property = " Value_Property ";

Element : اون عنصری که میخوایم استایل بهش بدیم
style : یک کلمه کلیدی هست که یعنی میخوایم استایل بدیم
property : اون ویژگی که میخوایم اعمال بشه
Value_Property : مقدار اون ویژگی سی اس اس که میخوایم اعمال بشه

Free-Learn

نحوه نوشتن استایل در جاوا اسکریپت

برای استایل دادن به عناصر توسط جاوا اسکریپت یه چندتا قانون کوچیک داریم که میگه :

هیچ فاصله ای بین نام ویژگی نباید باشه
ویژگی های ۲ کلمه ای ، همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه
ویژگی های ۱ کلمه ای همیشه باید با حروف کوچک انگلیسی نوشته شن

مثال :

backgroundColor // دو کلمه ای
backgroundImage // دو کلمه ای
zIndex // دو کلمه ای
color // یک کلمه ای

backgroundColor // دو کلمه ای

backgroundImage // دو کلمه ای

zIndex // دو کلمه ای

color // یک کلمه ای

و هر ویژگی دیگه ای که ۲ کلمه ای باشد ، دیگه حواستون باشه باید حرف اول از کلمه ی دوم رو با حروف بزرگ انگلیسی نوشت.

Free-Learn

مثال های مختلف از استایل دادن به عناصر در جاوا اسکریپت

مثال شماره ۱ : با کلیک بروی دکمه رنگ زمینه و رنگ متن صفحه تغییر پیدا میکند

<script>

function Change(){
 document.body.style.backgroundColor = "#282C34";
 document.body.style.color = "#fff";
}

</script>

function Change(){

document.body.style.backgroundColor = "#282C34";

document.body.style.color = "#fff";

}

</script>

امتحان کنید

مثال شماره ۲ : با کلیک بروی یک دکمه باکس متن مخفی می شود و با کلیک بروی دکمه دیگر نمایش داده میشود

<script>

function show(){
 var mybox = document.getElementById("MyBox");
 mybox.style.display = "block";
}

function hide(){
 var mybox = document.getElementById("MyBox");
 mybox.style.display = "none";
}

</script>

function show(){

var mybox = document.getElementById("MyBox");

mybox.style.display = "block";

}

function hide(){

var mybox = document.getElementById("MyBox");

mybox.style.display = "none";

}

</script>

امتحان کنید

مثال شماره ۳ : با کلیک بروی ۱ دکمه متن موجود در باکس هم مخفی میشود و هم نمایش داده میشود. ( کاربر روش کلیک میکنه مخفی میشه بعد دوباره که کلیک کنه نمایش داده میشه )

<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>

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>

امتحان کنید

مثال شماره ۴ : قرار دادن تصویر برای زمینه صفحه

<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>

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 در قسمت » جدول مشخصات ویژگی ، میتونید نحوه استفاده از همون ویژگی رو در جاوااسکریپت مشاهده نمایید. ( مشاهده نمونه )

Free-Learn

دریافت PDF یا پرینت این مطلب