از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش تغییر کلاس عنصر با جاوا اسکریپت – className و classList ویژگی کلاس در HTML برای تعریف کلاس برای یک یا چند عنصر HTML استفاده می شود. به این ترتیب، بسیاری از عناصر می توانند به یک کلاس از عناصر تعلق داشته باشند و سبک یکسانی را در شیوه نامه به اشتراک بگذارند، بنابراین نیازی به نوشتن یک سبک برای …
سرفصلهای مطلب
معرفی
را کلاس ویژگی در HTML برای تعریف یک کلاس برای یک یا چند عنصر HTML استفاده می شود. به این ترتیب، بسیاری از عناصر می توانند متعلق به یکسان باشند کلاس عناصر و سبک یکسانی را در شیوه نامه به اشتراک بگذارید، بنابراین مجبور نیستید بارها و بارها برای هر عنصر یک سبک بنویسید.
همانطور که گفته شد، گاهی اوقات شما می خواهید سبک خود را تغییر دهید به صورت پویا، بسته به روی ورودی کاربر به عنوان مثال، شما می خواهید حالت روز/شب را برای وب خود پیاده سازی کنید page، که می تواند به طور موثر با تغییر کلاس عنصر انجام شود.
این یک کار رایج برای زمانی است که می خواهید به کاربر اجازه دهید هر جنبه ای از برنامه شما را سفارشی کند. در این راهنما – ما نگاهی به روش تغییر کلاس یک عنصر HTML در جاوا اسکریپت.
درخت DOM
را DOM یا مدل شیء سند رابطی است که یک ساختار درختی از XML یا HTML ایجاد می کند. سلسله مراتب عناصر سند از طریق نشان داده می شود DOM. یک درخت از گره ها و شاخه ها تشکیل شده است، جایی که عناصر گره هستند و روابط عناصر شاخه هستند. در درخت DOM، root node است html – اولین عنصر لازم برای شروع علامت گذاری یک سند HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Some heading</h1>
</body>
</html>
درخت DOM برای این page به این شکل خواهد بود:
این یک درخت بسیار ساده است، اما یکسان است process برای هر پیچیده دلخواه اعمال می شود page. به لطف درخت DOM، از طریق جاوا اسکریپت، می‌توانیم به تمام عناصر HTML دسترسی داشته باشیم روی را pageو همچنین کلاس‌های عناصر، شناسه‌ها، محتوا و تمام ویژگی‌های آنها. ما حتی می توانیم عناصر جدید اضافه کنیم و موارد قدیمی را حذف کنیم. ما می توانیم رویدادهایی را ایجاد کنیم تا به آنها گوش دهیم و به آنها پاسخ دهیم (یعنی رنگ پس زمینه را با کلیک روی دکمه تغییر دهیم).
دریافت عناصر
حالا که می دانیم که ما می توان یک عنصر از HTML بدست آورید، بیایید ببینیم که چگونه در واقع انجام دادن که با استفاده از جاوا اسکریپت برای تغییر کلاس یک عنصر، ابتدا باید آن را بازیابی کنیم. بسته به روی عنصر، ما می توانیم آنها را از طریق چند رویکرد مختلف به دست آوریم:
getElementsByClassName(class_name)– یک را برمی گرداندHTMLCollectionکه حاوی عناصر HTML است که نام کلاس آنها برابر استclass_name.getElementById(id_name)– یک عنصر HTML که id آن برابر است را برمی گرداندid_name.getElementsByTagName(tag_name)– یک را برمی گرداندHTMLCollectionعناصر با برچسبtag_name.
ما با این فایل HTML کار خواهیم کرد:
<!DOCTYPE HTML>
<html>
<head>
<title>Web page title</title>
</head>
<body class="page-body">
<h1 class="headings">Some heading</h1>
<h3 class="headings">More of some heading</h3>
<h5 class="headings">Another heading here</h5>
<a href="https://www.google.com" id="link-to-google">Some random link</a>
<ul>
<li>Thing #1</li>
<li>Thing #2</li>
<li>Thing #3</li>
</ul>
</body>
<script src="script.js"></script>
</html>
دریافت عناصر با استفاده از getElementsByClassName()
بیایید بسازیم script.js فایلی که به ما وارد شده است page:
$ touch script.js
و در داخل آن – عناصری را که به “عنوان” تعلق دارند، پیدا کرده و بازیابی می کنیم. class:
console.log(document.getElementsByClassName("headings"));
از آنجایی که احتمالاً بیش از یک عنصر متعلق به یک کلاس وجود دارد – این یک را برمی گرداند HTMLCollection:
HTMLCollection(3)
- 0: h1.headings
- 1: h3.headings
- 2: h5.headings
length: 3
یک HTMLCollection مجموعه ای از عناصر HTML است که روش های مختلفی را برای انتخاب آنها از مجموعه ارائه می دهد، مانند:
className()– رشته ای را برمی گرداند که نشان دهنده نام کلاس است. این روش همچنین می تواند برای تنظیم کلاس یک عنصر (که دقیقا همان چیزی است که ما نیاز داریم) استفاده شود.innerHTML()– از آنجایی که عناصر HTML را می توان در یکدیگر تودرتو کرد، در صورت وجود عناصر تو در تو، این روش آنها را به صورت HTML برمی گرداند.innerText()– تمام متن داخل یک عنصر (از جمله عناصر تودرتو) را برمی گرداند.
همچنین رویدادهای زیادی وجود دارد که می توانیم به آنها گوش دهیم، مانند: onclick، ondblclick، onkeydown، onkeypress. می‌توانید در مورد رویدادهای جاوا اسکریپت اطلاعات بیشتری کسب کنید اسناد رسمی.
دریافت عناصر با استفاده از getElementById()
شما می توانید عناصر را توسط آنها ربوده باشید شناسه، از طریق getElementById() روش:
console.log(document.getElementById("link-to-google"));
که منجر به:
<a href="https://www.google.com" id="link-to-google">Some random link</a>
دریافت عناصر با استفاده از getElementsByTagName()
در نهایت، ما همچنین می توانیم عناصر را بر اساس آنها پیدا کنیم برچسب زدن، اگر کلاس یا شناسه نداشته باشند. این مجموعه ای از عناصر HTML را برمی گرداند، زیرا معمولاً بیش از یک عنصر با یک تگ دارید.
حالا، اگر بخواهیم همه را بدست آوریم <li> عناصر، ما می توانیم با جستجو li برچسب:
console.log(document.getElementsByTagName("li"));
که منجر به:
HTMLCollection(3) (li, li, li)
- 0: li
- 1: li
- 2: li
مقدار برگشتی همان است getElementsByClassName – یک HTMLCollection.
صرف نظر از رویکرد مورد استفاده برای به دست آوردن یک عنصر – اکنون می توانیم کلاس آن را تغییر دهیم.
تغییر کلاس یک عنصر با استفاده از جاوا اسکریپت
تغییر کلاس عنصر با نام کلاس
بیایید یک ساختگی ایجاد کنیم index.html page حاوی برخی داده ها به کاربر اجازه می‌دهیم بین «حالت روز» و «حالت شب» جابه‌جا شود، که پالت رنگ مورد استفاده را تغییر می‌دهد روی صفحه وب ما همچنین به یک نیاز داریم script.js فایل وارد شده در اینجا، برای یافتن و تغییر عناصر، و همچنین a style.css فایلی که حاوی تمام کدهای استایل ما است.
بیایید با index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Day/night mode</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body class="page-body-day" id="page-body">
<h1 class="main-heading-day" id="main-heading">Some heading</h1>
<p>Dummy text, dummy text, dummy text</p>
<p>Some more dummy text, more dummy text, more dummy text</p>
<button onclick="switchMode()">Switch day/night mode</button>
</body>
<script src="script.js"></script>
</html>
تمام عناصری که با کلیک کاربر ظاهر خود را تغییر می دهند روی را حالت روز/شب را تغییر دهید دکمه مربوط به خود هستند شناسهs و پیش فرض به آنها اختصاص داده شده است element-day کلاس به ترتیب
هر یک element-day کلاس یک دارد element-night جایگزین در style.css فایل:
.page-body-day {
background-color: white;
color: black;
}
.page-body-night {
background-color: #02182B;
color: yellow;
}
.main-heading-day {
color: black;
}
.main-heading-night {
color: yellow;
}
از آنجایی که ما خواهیم بود تغییر کلاس از عناصر ما، ما نمی خواهیم جستجو بر اساس کلاس، در غیر این صورت، موارد لبه خواهیم داشت. ما می خواهیم چیزی از آن را جستجو کنیم درست شد ارزش، که است شناسه، و سپس بررسی کنید className از آن عنصر – تغییر آن به کلاس مناسب در process:
function switchMode(){
// Body switching
if(document.getElementById("page-body").className == "page-body-day"){
document.getElementById("page-body").className = "page-body-night";
}else{
document.getElementById("page-body").className = "page-body-day";
}
// Heading switching
if(document.getElementById("main-heading").className == "main-heading-day"){
document.getElementById("main-heading").className = "main-heading-night";
}else{
document.getElementById("main-heading").className = "main-heading-day";
}
}
را className نام کلاس آن عنصر را برمی گرداند. اگرچه، اگر مقدار جدیدی به آن اختصاص دهیم – می توانیم به طور مؤثر آن را به روز کنیم class ویژگی یک برچسب اگر عنصر دارای یک element-day کلاس، ما آن را به element-night و بالعکس.
هنگام تعویض بدن color ویژگی در CSS، ما به طور خودکار تمام عناصری را که فاقد آن هستند تغییر می دهیم color ویژگی تعریف شده (در مورد ما این ویژگی ماست <p> برچسب ها). هنگامی که تغییر کلاس اتفاق می افتد، CSS شروع به خواندن کلاس های جدید تغییر کرده و سبک ها را بر اساس آن اعمال می کند.
اگرچه، این رویکرد خیلی مدرن نیست و عمدتاً برای تطبیق عملکردهای عقب مانده اینترنت اکسپلورر 8 و 9 استفاده می شود.
تغییر کلاس عنصر با کلاس لیست
مرورگرهای اینترنتی جدیدتر از ویژگی جدیدتری به نام پشتیبانی می کنند classList. آنچه این ویژگی ارائه می دهد لیستی از همه کلاس ها که بر روی یک عنصر HTML خاص اعمال می شوند.
توجه داشته باشید: اینترنت اکسپلورر 8 و 9 پشتیبانی نمی کنند classList.
classList چند روش دارد که می توانیم از آنها استفاده کنیم:
add(class_name)– یک کلاس جدید اضافه می کندclass_nameبه لیستremove(class_name)– یک کلاس را حذف می کندclass_nameاز لیستtoggle(class_name)– کلاس اضافه می کندclass_nameاگر قبلاً اضافه نشده باشد، در غیر این صورت آن را حذف می کند.contains(class_name)– بررسی می کند که آیاclass_nameدر لیست کلاس های اعمال شده برای عنصر HTML قرار دارد.
که گفته شد – ما می توانیم بازنویسی کنیم script.js فایل را برای استفاده از این روش ها به جای آن:
function switchMode(){
// Body switching
if(document.getElementById("page-body").classList.contains("page-body-day")){
document.getElementById("page-body").classList.remove("page-body-day");
document.getElementById("page-body").classList.add("page-body-night");
} else{
document.getElementById("page-body").classList.remove("page-body-night");
document.getElementById("page-body").classList.add("page-body-day");
}
// Heading switching
if(document.getElementById("main-heading").classList.contains("main-heading-day")){
document.getElementById("main-heading").classList.remove("main-heading-day");
document.getElementById("main-heading").classList.add("main-heading-night");
} else{
document.getElementById("main-heading").classList.remove("main-heading-night");
document.getElementById("main-heading").classList.add("main-heading-day");
}
}
این رویکرد در HTML5 و در مرورگرهای مدرن پشتیبانی می‌شود و از این طریق می‌توانید کلاس‌ها را به روشی مشابه دستکاری کنید. جی کوئری – یک کتابخانه جاوا اسکریپت که به طور گسترده برای دستکاری عناصر HTML، رویدادها و غیره استفاده می شود.
از طریق classList، می توانید از گنجاندن یک کتابخانه خارجی که کاهش می دهد صرف نظر کنید PLT (زمان بارگذاری صفحه) که اخیراً اهمیت پیدا کرده است وب حیاتی سیگنال برای درجه بندی SEO
نتیجه
جاوا اسکریپت به دلیل ساده بودن DOM باعث می شود که اساساً همه چیز را دستکاری کند، مورد استقبال گسترده قرار گرفت روی وب شما page، از جمله موارد دیگر.
در این آموزش نگاهی به آن انداختیم روش تغییر کلاس یک عنصر در جاوا اسکریپت.
منتشر شده در 1403-01-16 16:13:04
