از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در این بایت شما کمی در مورد اهمیت کلاس های CSS و نحوه دستکاری آنها با استفاده از جاوا اسکریپت وانیلی و جی کوئری یاد خواهید گرفت. در پایان، شما قادر خواهید بود به راحتی ظاهر و رفتار عناصر وب خود را به صورت پویا تغییر دهید. بیا شروع کنیم!
کلاس های CSS
همانطور که احتمالا می دانید، کلاس های CSS نقش مهمی در توسعه وب دارند. آنها به شما این امکان را می دهند که یک بار یک سبک را تعریف کنید و سپس آن را در چندین عنصر در وب سایت خود اعمال کنید و از ثبات و کاهش تکرار اطمینان حاصل کنید. به عنوان مثال، شما ممکن است یک .highlight کلاسی که رنگ پس زمینه یک عنصر را به زرد تغییر می دهد. برای اعمال این سبک، شما به سادگی کلاس را به عناصر مورد نظر در HTML خود اضافه می کنید.
<div class="highlight">This is a highlighted text.</div>
با این حال، اگر بخواهید کلاس ها را به صورت پویا، بر اساس تعامل کاربر یا شرایط دیگر اضافه یا حذف کنید، چه؟ اینجاست که ما از جاوا اسکریپت استفاده خواهیم کرد.
چرا کلاس های CSS را با جاوا اسکریپت دستکاری کنیم؟
در حالی که CSS برای سبک های ثابت عالی است، جاوا اسکریپت به ما اجازه می دهد تا صفحات وب خود را پویا و تعاملی کنیم. با دستکاری کلاس های CSS با جاوا اسکریپت، می توانید ظاهر و رفتار عناصر را در لحظه تغییر دهید. این چیزی است که بدون استفاده از JS امکان پذیر نیست.
به عنوان مثال، ممکن است بخواهید یک را اضافه کنید .active کلاس به یک پیوند ناوبری هنگامی که روی آن کلیک می شود، یا a را حذف کنید .hidden کلاس از یک مودال هنگامی که یک دکمه فشار داده می شود. این دستکاری پویا در کلاس ها می تواند تجربه کاربری یک وب سایت را تا حد زیادی افزایش دهد.
در چند بخش بعدی خواهیم دید که چگونه می توان این کار را در JS با استفاده از چند روش مختلف انجام داد.
جاوا اسکریپت وانیلی
در وانیلی جاوا اسکریپت، می توانید کلاس ها را با استفاده از آن اضافه یا حذف کنید classList خاصیت یک عنصر این ویژگی یک لایو برمی گرداند DOMTokenList مجموعه ای از ویژگی های کلاس عنصر
اضافه کردن چندین کلاس
برای اضافه کردن چندین کلاس، می توانید از add روش از classList. این متد می تواند چندین آرگومان را بپذیرد که هر کدام یک کلاس است که می خواهید اضافه کنید. اگر کلاس مشخصی از قبل روی عنصر وجود داشته باشد، دیگر اضافه نخواهد شد.
در اینجا یک مثال است:
let element = document.querySelector("#myElement");
element.classList.add("class1", "class2", "class3");
پس از اجرای این کد، عنصر با id “myElement” کلاس ها را خواهد داشت class1، class2، و class3 به آن اضافه شد.
حذف چندین کلاس
به طور مشابه، برای حذف چندین کلاس، می توانید از remove روش از classList. این متد چندین آرگومان را نیز می پذیرد که هر کدام یک کلاس باید حذف شوند. اگر کلاس مشخصی روی عنصر وجود نداشته باشد، نادیده گرفته می شود. این یک ویژگی خوب است زیرا مقداری “ایمنی” داخلی را فراهم می کند و خطایی ایجاد نمی کند.
در اینجا نحوه انجام این کار آمده است:
let element = document.querySelector("#myElement");
element.classList.remove("class1", "class2", "class3");
پس از اجرای این کد، کلاس ها class1، class2، و class3 از عنصر با id “myElement”.
در بخش‌های بعدی نحوه دستیابی به نتایج مشابه با استفاده از jQuery را توضیح خواهیم داد.
جی کوئری
jQuery، یک کتابخانه محبوب جاوا اسکریپت، روش های خاص خود را برای افزودن و حذف کلاس ها ارائه می دهد. اگر قبلاً از jQuery در پروژه خود استفاده می کنید، این روش ها می توانند نحو مختصرتری برای دستکاری کلاس ارائه دهند.
اضافه کردن چندین کلاس
برای اضافه کردن چندین کلاس با جی کوئری، از addClass() روش. در اینجا به نظر می رسد:
$("#myElement").addClass("class1 class2 class3");
این کد کلاس ها را اضافه می کند class1، class2، و class3 به عنصر دارای شناسه myElement. بر خلاف classList.add() روش در جاوا اسکریپت وانیلی، addClass() متد در jQuery یک آرگومان رشته ای را می گیرد که نام کلاس ها با فاصله از هم جدا شده اند.
حذف چندین کلاس
باز هم، برای jQuery، فرآیند کاملاً مشابه JS ساده است. این removeClass() متد استفاده می‌شود و نام کلاس‌ها به‌عنوان رشته‌ای با فاصله ارسال می‌شوند:
// Select the element
let element = $("#myElement");
// Remove multiple classes
element.removeClass("class1 class2 class3");
در این مورد، ما از jQuery برای انتخاب عنصر با استفاده از id “myElement” و “class1″، “class2” و “class3” را از آن حذف کنید. دوباره، اگر کلاس ها وجود نداشته باشند، removeClass() فقط به راه خود ادامه می دهد و کلاس گمشده را نادیده می گیرد.
از موارد و برنامه های کاربردی استفاده کنید
دستکاری کلاس های CSS با جاوا اسکریپت دارای طیف گسترده ای از برنامه ها است که قبلاً به برخی از آنها اشاره کردیم. این یک تکنیک رایج برای افزودن رفتار پویا به وب سایت ها است. برای مثال، ممکن است یک منوی پیمایش داشته باشید که وقتی کاربر به پایین اسکرول می‌کند، سبک تغییر می‌کند. این را می توان با افزودن یا حذف کلاس هایی که ظاهر منو را کنترل می کنند انجام داد.
یکی دیگر از موارد استفاده رایج، اعتبار سنجی فرم است. ممکن است فرمی داشته باشید که در آن کاربر باید یک آدرس ایمیل معتبر وارد کند. اگر کاربر یک ایمیل نامعتبر وارد می کند، می توانید یک کلاس به فیلد ورودی اضافه کنید که حاشیه آن را به قرمز تغییر می دهد. اگر کاربر اشتباه خود را تصحیح کرد، می‌توانید کلاس را حذف کنید تا رنگ حاشیه را برگردانید.
در برنامه های کاربردی وب تعاملی، ممکن است عناصری داشته باشید که ظاهر را بر اساس اقدامات کاربر یا تغییرات داده ها تغییر می دهند. مانند یک دکمه بسته به فعال یا غیرفعال بودن می‌تواند سبک‌های مختلفی داشته باشد. با افزودن یا حذف کلاس‌ها، می‌توانید این سبک‌ها را مستقیماً از کد جاوا اسکریپت خود کنترل کنید.
نتیجه
در این بایت، ما یاد گرفتیم که چگونه چندین کلاس CSS را با استفاده از جاوا اسکریپت وانیلی و جی کوئری به یک عنصر اضافه و حذف کنیم. ما دیدیم که این کار را می توان با استفاده از classList دارایی در جاوا اسکریپت و addClass() و removeClass() روش ها در جی کوئری ما همچنین برخی از کاربردهای عملی این تکنیک ها، مانند استایل پویا و اعتبارسنجی فرم را توضیح داده ایم.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-26 07:23:04
