DOM - تغییر CSS

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

HTML DOM به جاوا اسکریپت این اجازه می‌دهد که طرح (Style) عناصر HTML را تغییر دهد.[۱]

تغییر Style در HTML

برای تغییر طرح (Style) یک عنصر HTML، از شیوه نوشتار (Sytanx) زیر استفاده کنید:

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

مثال زیر طرح (Style) عنصر <p> را تغییر می‌دهد:

مثال

<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 DOM به شما اجازه می‌دهد که هنگامی که رویداد رخ داد، تکه کدی را اجرا کنید.

رویدادها توسط مرورگر زمانی که «چیزی» برای عناصر HTML اتفاق می‌افتد، ساخته می‌شوند:

  • زمانی که روی یک عنصر کلیک می‌شود
  • هنگامی که صفحه بارگذاری شد
  • زمانی که فیلدهای ورودی تغییر کنند
شما مطالب بیشتری را در مورد رویدادها در فصل‌های آینده از این آموزش خواهید آموخت.

این مثال طرح یک عنصر HTML با id، برابر با "id1" را زمانی که کاربر روی یک دکمه کلیک می‌کند، تغییر می‌دهد : 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>


مشاهدهٔ نتیجه


مثال های بیشتر

قابل مشاهده بودن. چطور یک عنصر را غیرقابل مشاهده کنیم. آیا شما می‌خواهید که عنصر نمایش یابد یا نه؟

مرجع شیء Style در HTML DOM (HTML DOM Style Object)

برای مشاهده تمامی ویژگی‌های style (به فارسی: طرح) در HTML DOM، نگاهی به مقاله کامل ما تحت عنوان مرجع شیء Style در HTML DOM (HTML DOM Style Object) بیندازید.

تمرینات جاوا اسکریپت

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی