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

در این بخش با ویژگی نام کلاس جاوااسکریپت آشنا می شویم.

نکات اصلی نام کلاس جاوااسکریپت:

• این ویژگی برای تنظیم یا برگرداندن نام یک کلاس از یک عنصر HTML استفاده می شود.
• شباهت زیادی به ویژگی classList دارد.
• چندین کلاس اختصاص داده شده باید با فاصله از هم جدا شوند.

توضیحات نام کلاس جاوااسکریپت

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

جنبه مهم دیگر این ویژگی استفاده از تابع document.getElementsByClassName است که یک آرایه زنده متشکل از عناصر کودک را بازیابی می کند که همه متعلق به یک کلاس مشخص هستند.

هنگامی که این روش بر روی شی document سند اعمال می شود ، document.getElementByClassName کل سند را جستجو می کند (همچنین گره ریشه). پس از فراخوانی این روش ، یک توسعه دهنده مجموعه ای از عناصر یافت شده HTML را دریافت می کند.

مثال زیر نشان می دهد که چگونه می توانید کلاس مجموعه JavaScript را برای یک عنصر ایجاد کنید:

document.getElementById("sampleDiv").className = "sampleStyle";

نحو

همانطور که از بخش قبلی آموخته اید ، ویژگی JavaScript className می تواند عناصر HTML را بازیابی یا تنظیم کند. نحو این خاصیت دشوار نیست و شما باید بتوانید به سرعت حروف بزرگ و ساختار آن را بخاطر بسپارید.

با این حال ، باید به طور خلاصه نحوه تنظیم چندین نام کلاس را توضیح دهیم. برای جلوگیری از اشتباهات ، باید هر نام کلاس را با فاصله ای بین آنها جدا کنید تا کد به درستی خوانده شود.

برای بازگرداندن ویژگی className ، از HTMLElementObject.className استفاده کنید. اکنون ، برای تنظیم ویژگی JavaScript className ، HTMLElementObject.className = class را انتخاب کنید.

ارزش ها

ویژگی JavaScript className یک مقدار را می پذیرد. کلاس نامیده می شود و برای تعریف کلاس یک عنصر استفاده می شود. با این حال ، هنگامی که می خواهید JavaScript کلاس را تغییر دهید ، به یاد داشته باشید که چندین کلاس باید توسط فضاهای اختصاص داده شده از هم جدا شوند (به عنوان مثال ، class1 class2).

کلاس مقدار بازگشتی که نام آن ارائه می شود ، رشته ای است که کلاس را نشان می دهد ، یا یک لیست کلاس جدا شده از فاصله از یک عنصر مشخص در صورت داشتن چندین کلاس است.

از مثالهای کد بیاموزید

تئوری یادگیری یک چیز است: شما نباید منتظر بمانید و آنچه را آموخته اید تمرین کنید. بنابراین ، روی دکمه های Try it Live کلیک کنید تا این درس را به ویرایشگر کد ببرید. بیشتر نمونه های کد نحوه اصلاح یا بازیابی اطلاعات مربوط به <div> را نشان می دهد.

اولین مثال کد نحوه بازیابی کلاس عنصر را نشان می دهد:

var sampleElem1 = document.getElementsByClassName("sampleStyle")[0].className;
var sampleElem2 = document.getElementById("sampleDiv").className;

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

<div id="sampleDiv" class="sampleStyle">What a splendid Div element!</div>
document.getElementById("sampleDiv").className = "newSampleClass";

اگر می خواهید یک کلاس جدید به عنصری اضافه کنید و کلاس قدیمی را حفظ کنید ، این قطعه کد را دنبال می کنید:

document.getElementById("sampleDiv").className += "anotherSampleClass";

این مثال نشان می دهد که چگونه می توانید اندازه قلم عنصر را تغییر دهید:

var sampleElem = document.getElementById("sampleDiv");
if (sampleElem.className === "sampleStyle") {
     sampleElem.style.fontSize = "20px";
}

مثال کد زیر توضیح می دهد که چگونه می توانید بین دو نام کلاس جابجا شوید. تابع sampleStyle را در
جستجو می کند و آن را با sampleStyle2 جایگزین می کند:

function sampleFunction(){
    var sampleElem = document.getElementById("sampleDiv");
    // If "samplestyle" exists, it is overwritten it with "sampleStyle2"
    if (sampleElem.className === "sampleStyle") {
        sampleElem.className = "sampleStyle2";
    } else {
        sampleElem.className = "sampleStyle";
    }
}

اگر می خواهید بین دو کلاس جابجا شوید و با توجه به موقعیت پیمایش در آنها تغییر دهید ، این مثال را دنبال کنید:

window.onscroll = () => sampleFunction();
function sampleFunction() {
  if (document.body.scrollTop > 100) {
    document.getElementById("samplePara").className = "test";
  } else {
    document.getElementById("samplePara").className = "";
  }
}