تغییر محتوای 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>


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

3 پاسخ به “تغییر محتوای html و css با جاوا اسکریپت”

  1. fleck 5600 econominder گفت:

    If you are going for best contents like myself, just go to see this web page
    daily for the reason that it presents quality contents, thanks

  2. Hong گفت:

    Just desire to say your article is as amazing.
    The clearness on your put up is just excellent and i can think you’re knowledgeable in this subject.

    Fine along with your permission let me to clutch your RSS feed to keep updated with approaching post.

    Thank you one million and please keep up the gratifying work.

  3. cheap flights گفت:

    This is really interesting, You are a very skilled
    blogger. I have joined your rss feed and sit up for in search of extra of your magnificent post.

    Additionally, I’ve shared your web site in my social networks

دیدگاهتان را بنویسید

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