HTML DOM در JavaScript- تغییر CSS

یادگیری JavaScript

تعداد بازدید : 1661

تاریخ و ساعت انتشار : دو شنبه 22 مرداد 1397 08:57

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

تغییر سبک HTML

برای تغییر سبک عنصر HTML، از این ساختار استفاده کنید:

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

زمانی که اتفاقی رخ می دهد رویدادها توسط مرورگر ایجاد می شوند

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

شما بیشتر در مورد رویداد در فصل بعدی این آموزش یاد خواهید گرفت.
زمانی که کاربر یک دکمه را کلیک می کند این مثال سبک عنصر 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>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

HTML DOM در JavaScript- تغییر CSS

تغییر سبک HTML

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

مهدی احدی

نظر شما

یادگیری JavaScript

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

مقالات مرتبط