تغییر محتوای html و css با جاوا اسکریپت

تا به حال با کلیات زبان برنامه نویسی جاوااسکریپت مانند نگارش و syntax این زبان و تمامی ساختار آن آشنا شدید. اما در این آموزش می خواهیم به شما طریقه کارکردن با این زبان برای تغییر محتوای سند html و همچنین تغییر سبک عناصر را آموزش دهیم.

برای تغییر در سبک یا محتوای عناصر سند html باید مسیر زیر را دنبال کنید :

 

انتخاب عناصر html

برای انتخاب کردن عنصر مورد نظر قبل از هر چیزی ابتدا باید با مدل DOM آشنا شوید، زمانی که یک سند html بارگذاری می شود، مرورگر از آن سند یک مدل شیء گرا (Document Object Model) ایجاد می کند. این مدل تمامی عناصر سند را به صورت یک ساختار درختی کنار یکدیگر قرار می دهد که با استفاده از یکسری دستورات در js می توان به آسانی آن ها را انتخاب نمود.

مهم ترین توابع برای یافتن عناصر و انتخاب آنها در javascript :

توابع توضیحات
document.getElementById(id) یافتن عنصر با استفاده از شناسه آن
document.getElementsByTagName(name) انتخاب عناصر با استفاده از نام تگ آنها
document.getElementsByClassName(name) انتخاب عناصر با استفاده از کلاس آن ها

گرفتن محتوا عناصر و تغییر آن ها

برای اینکه به محتوای یک عنصر دسترسی پیدا کنید بعد از انتخاب آن از ویژگی ( innerHTML ) استفاده کنید.

  • element.innerHTML

اما برای تغییر محتوای عناصر می توانید به صورت زیر عمل کنید :

  • element.innerHTML = new value

گرفتن سبک عناصر و تغییر آن ها

برای اینکه به سبک یک عنصر دسترسی پیدا کنید بعد از انتخاب آن از ویژگی ( style.property ) استفاده کنید.

  • element.style.property

اما برای تغییر استایل عناصر می توانید به صورت زیر عمل کنید :

  • element.style.property = new value

توجه همچنین برای تغییر attribute عناصر می توانید به صورت زیر عمل کنید :

  • element.attribute = new value
  • element.setAttribute(attribute,value)

حتی می توانید با دستورات زیر عناصری را به سند خود اضافه و یا از آن حذف نمایید :

توابع توضیحات
document.createElement(element) ساخت یک عنصر در سند
document.removeChild(element) حذف یک عنصر از سند
document.appendChild(element) اضافه کردن یک عنصر به سند
document.replaceChild(new,old) جایگزینی یک عنصر با دیگری
document.write(text) نوشتن محتوا در خروجی سند

تا به اینجا طریقه تغییر محتوا، ویژگی ها و سبک های یک عنصر را فرا گرفته اید اما اگر با آموزش های قبلی ما همراه بوده باشید می دانید که اسکریپت ها همزمان با لود صفحه اجرا می شوند و این گاها نیاز ما را بر طرف نمی کند. برای رفع نیاز های خود از رویداد ها در javascript استفاده می کنیم که این کار به صورت زیر انجام می شود:

توابع توضیحات
element.event = function(){code} اضافه کردن یک رویداد به یک عنصر و اختصاص یک تابع به آن

در زیر یک مثال برای درک بهتر موارد فوق آورده ایم :


لطفا بر روی دکمه زیر کلیک کرده و نتیجه را مشاهده نمایید


<button style=”width: 100%;padding: 1vw;background-color: #01d101;” >
click me
</button>
<script>
document.getElementsByTagName(‘button’)[0].onclick = function(){
this.style.backgroundColor=’red’;
this.innerHTML=’تغییر محتوا و رنگ با یک کلیک’;
}
</script>


همچنین بخوانید...!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *