DOM - تغییر CSS

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
۱معرفی DOM
۲متدهای DOM
۳اسناد DOM
۴عناصر HTML DOM
۵DOM HTML
۶DOM CSS
۷انیمیشن DOM
۸رویدادها در DOM
۹شنوندهٔ رویداد در DOM
۱۰پیمایش در DOM
۱۱عناصر HTML DOM (گره‌ها)
۱۲مجموعه‌های DOM
۱۳لیست گره‌ها در DOM
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

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) بیندازید.

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

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



منابع آموزشی