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

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> 
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط