DOM - تغییر CSS
HTML DOM به جاوا اسکریپت این اجازه می‌دهد که طرح (به انگلیسی: Style) عناصر HTML را تغییر دهد.[۱]
تغییر Style در HTML
برای تغییر طرح (به انگلیسی: Style) یک عنصر HTML، از شیوه نوشتار (به انگلیسی: Sytanx) زیر استفاده کنید:
document.getElementById(id).style.property = new style
مثال زیر طرح (به انگلیسی: Style) عنصر <p> را تغییر می‌دهد:
مثال
1 <html>
2 <body>
3
4 <p id="p2">Hello World!</p>
5
6 <script>
7 document.getElementById("p2").style.color = "blue";
8 </script>
9
10 <p>The paragraph above was changed by a script.</p>
11
12 </body>
13 </html>
استفاده از رویدادها
HTML DOM به شما اجازه می‌دهد که هنگامی که رویداد رخ داد، تکه کدی را اجرا کنید.
رویدادها توسط مرورگر زمانی که «چیزی» برای عناصر HTML اتفاق می‌افتد، ساخته می‌شوند:
- زمانی که روی یک عنصر کلیک می‌شود
- هنگامی که صفحه بارگذاری شد
- زمانی که فیلدهای ورودی تغییر کنند
این مثال طرح یک عنصر HTML با id، برابر با "id1" را زمانی که کاربر روی یک دکمه کلیک می‌کند، تغییر می‌دهد : id="id1"
مثال
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1 id="id1">My Heading 1</h1>
6
7 <button type="button"
8 onclick="document.getElementById('id1').style.color = 'red'">
9 Click Me!</button>
10
11 </body>
12 </html>
مثال های بیشتر
قابل مشاهده بودن. چطور یک عنصر را غیرقابل مشاهده کنیم. آیا شما می‌خواهید که عنصر نمایش یابد یا نه؟
مرجع شیء Style در HTML DOM (به انگلیسی: HTML DOM Style Object)
برای مشاهده تمامی ویژگی‌های style (به فارسی: طرح) در HTML DOM، نگاهی به مقاله کامل ما تحت عنوان مرجع شیء Style در HTML DOM (به انگلیسی: HTML DOM Style Object) بیندازید.
تمرینات جاوا اسکریپت
ساخت نمونه مثال این بخش در دست اقدام است.
منابع آموزشی