۲۴
آبان

جلسه ۷۶ : تغییر CSS در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در ایم جلسه قصد داریم به آموزش تغییر CSS در جاوا اسکریپت JavaScript و تغییر استایل HTML در جاوا اسکریپت بپردازیم.

HTML DOM این امکان را به جاوا اسکریپت می دهد تا استایل عناصر HTML را تغییر دهد.

تغییر استایل HTML

برای تغییر استایل HTML از ساختار دستور زیر استفاده می کنیم:

مثال :

 document.getElementById(id).style.property = new style

1	document.getElementById(id).style.property = new style

مثال زیر استابل عنصر <p> را تغییر می دهد:

مثال : تغیر استایل عناصر html

 <html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

<html>

<body>

<p id="p2">Hello World!</p>

document.getElementById("p2").style.color = "blue";

</script>

<p>The paragraph above was changed by a script.</p>

</body>

</html>

خودتان امتحان کنید »

استفاده از رویداد ها

HTML DOM این امکان را به ما می دهد تا هنگامی که رویدادی رخ داد، کدی را اجرا کنیم.

رویداد ها وقتی “چیز هایی” برای عناصر HTML رخ دهد توسط مرورگر تولید می شوند:

یک عنصر کلیلک شود
بارگذاری صفحه تمام شود
فیلد های ورودی تغییر کنند

در مثال زیر هنگامی که کاربر روی دکمه کلیک می کند، استایل عنصر HTML با “id=”id1 تغییر می کند:

مثال : تغییر استایل عناصر با رویداد کلیک

 <!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"

onclick="document.getElementById('id1').style.color = 'red'">

Click Me!</button>

</body>

</html>

خودتان امتحان کنید »

همچنین کد بالا را می توانیم مانند مثال زیر بنویسیم:

مثال :

 document.getElementById("id1").onclick = change ;
function change()
{
document.getElementById('id1').style.color = 'red';
}

document.getElementById("id1").onclick = change ;

function change()

{

document.getElementById('id1').style.color = 'red';

}

جلسه تغییرات CSS در جاوا اسکریپت نیز به پایان رسید.
در جلسه بعد به آموزش گره ها در DOM خواهیم پرداخت. با ما همراه باشید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 8

R
آبان ۱۶, ۱۴۰۱
با سلام وخسته نباشید
میخوام برا هر کدوم از این ماشینها رنگ متفاوتی بدم
چطور میتونم ؟
میشه راهنماییم بفرمایید
var e1=document.getElementById(“demo”)
e1.innerHTML =myCar1.name + ” ” + myCar1.year
e1.innerHTML +=””+myCar2.name + ” ” + myCar2.year
e1.innerHTML +=””+myCar3.name + ” ” + myCar3.year
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۷۶ : تغییر CSS در جاوا اسکریپت

تغییر استایل HTML

استفاده از رویداد ها

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ