JavaScript HTML DOM - تغییر CSS
- صفحه قبلی فرم DOM
- صفحه بعدی آنی‌سازی DOM
HTML DOM اجازه می‌دهد JavaScript استایل عناصر HTML را تغییر دهد.
تغییر استایل HTML
برای تغییر استایل عناصر HTML، از این نحوه استفاده کنید:
document.getElementById(id).style.ویژگی = استایل جدید
در این مثال <p> عنصر استایل:
مثال
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>این پاراگراف توسط اسکریپت تغییر کرده است.</p>
</body>
</html>
استفاده از رویدادها
HTML DOM به شما اجازه می‌دهد که در زمان رخ دادن رویداد، کد اجرا کنید.
وقتی که «چیزی خاص» در عنصر HTML رخ می‌دهد، مرورگر رویدادی ایجاد می‌کند:
- وقتی که روی یک عنصر کلیک می‌شود
- وقتی که صفحه بارگذاری می‌شود
- وقتی که فیلد ورودی تغییر می‌کند
شما در فصل بعدی این آموزش بیشتر درباره رویدادها یاد خواهید گرفت.
این مثال در هنگام کلیک کاربر بر روی عنصر با id="id1"، استایل عنصر HTML را تغییر می‌دهد:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">عنوان 1 من</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
من را کلیک کنید!
</button>
</body>
</html>
مثال‌های بیشتر
- Visibility
- چگونه می‌توانید عنصر را نامرئی کنید. آیا می‌خواهید عنصر را نمایش دهید؟
دستورالعمل شیء Style HTML DOM
برای دسترسی به تمام ویژگی‌های استایل HTML DOM، لطفاً به دستورالعمل شیء Style HTML DOM.
- صفحه قبلی فرم DOM
- صفحه بعدی آنی‌سازی DOM
