از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
دستکاری عناصر شبه CSS ::before و ::after با استفاده از JavaScript/jQueryدر این مقاله روش انتخاب و دستکاری شبه عناصر CSS، به ویژه ::before و ::after، با استفاده از JavaScript و jQuery را نشان خواهیم داد. به‌عنوان یک توسعه‌دهنده وب، احتمالاً حداقل این شبه عناصر را در یک فایل CSS دیده‌اید، اما ممکن است فرصتی برای تعامل برنامه‌نویسی با آنها نداشته باشید. این مقاله…
سرفصلهای مطلب
معرفی
در این مقاله روش انتخاب و دستکاری شبه عناصر CSS را به طور خاص نشان خواهیم داد ::before و ::after، با استفاده از جاوا اسکریپت و جی کوئری. به‌عنوان یک توسعه‌دهنده وب، احتمالاً حداقل این شبه عناصر را در یک فایل CSS دیده‌اید، اما ممکن است فرصتی برای تعامل برنامه‌نویسی با آنها نداشته باشید. این مقاله به شما نشان می دهد که چگونه و چرا ممکن است بخواهید این کار را انجام دهید.
شبه عناصر CSS چیست؟
شبه عناصر CSS کلمات کلیدی اضافه شده به انتخابگرها هستند که به شما امکان می دهند بخش های خاصی از یک سند را استایل دهید. به عنوان مثال، ::before و ::after شبه عناصر برای درج محتوا استفاده می شود قبل از یا بعد از محتوای یک عنصر
p::before {
content: "Read this - ";
}
p::after {
content: " - thank you!";
}
در کد بالا، ::before شبه عنصر “Read this – ” را قبل از محتوای هر اضافه می کند <p> عنصر، و ::after شبه عنصر اضافه می کند “- متشکرم!” پس از محتوای هر <p> عنصر
این چیزی است که در واقع به نظر می رسد:
روباه قهوه ای سریع از روی سگ تنبل می پرد. والس، پوره بد، برای جست و خیزهای سریع آزاردهنده. ابوالهول از کوارتز سیاه، نذر من را قضاوت کنید. گورخرهای ناز چقدر سریع می پرند! جعبه ام را با پنج دوجین کوزه مشروب بسته بندی کنم.
اگر می خواهید منبع این را بررسی کنید page، خواهید دید که “این را بخوانید – ” و ” – متشکرم!” در واقع در <p> برچسب، آنها توسط CSS درج می شوند.
توجه داشته باشید: این ::before و ::after شبه عناصر اغلب با استفاده می شود content ویژگی، که برای درج محتوای تولید شده استفاده می شود.
از آنجایی که این شبه عناصر در واقع بخشی از DOM نیستند، نمی توان آنها را مستقیماً با استفاده از جاوا اسکریپت یا جی کوئری انتخاب یا دستکاری کرد. ممکن است این یک محدودیت به نظر برسد، اما راه‌حل‌هایی وجود دارد که در بخش‌های بعدی به بررسی آنها خواهیم پرداخت.
چرا باید شبه عناصر را دستکاری کنید؟
شبه عناصر CSS ابزار قدرتمندی هستند که می‌توان از آن برای استایل دادن به بخش‌های خاصی از عناصر HTML استفاده کرد. می توان از آنها برای افزودن جلوه های ویژه یا محتوای اضافی قبل یا بعد از محتوای یک عنصر استفاده کرد. با این حال، مواقعی وجود دارد که ممکن است لازم باشد این شبه عناصر را به صورت پویا و بر اساس دستکاری کنید روی تعاملات کاربر یا تغییرات در وضعیت برنامه شما. اینجاست که جاوا اسکریپت وارد می شود.
فرض کنید یک CSS دارید ::before شبه عنصری که یک نماد تزئینی را به دکمه های شما اضافه می کند. حال فرض کنید می خواهید این نماد را زمانی که کاربر روی دکمه کلیک می کند تغییر دهید. این تغییر را نمی توان تنها با CSS به دست آورد. برای انتخاب شبه عنصر و سپس تغییر آن باید از جاوا اسکریپت استفاده کنید.
انتخاب شبه عناصر با استفاده از جاوا اسکریپت
همانطور که قبلا ذکر شد، شبه عناصر بخشی از DOM نیستند و نمی توان آنها را مستقیماً با استفاده از جاوا اسکریپت انتخاب کرد. با این حال، ما همچنان می‌توانیم با تغییر قوانین CSS مرتبط آنها را دستکاری کنیم. برای انجام این کار، ابتدا باید قانون CSS را که شبه عنصر را تعریف می کند، انتخاب کنیم.
فرض کنید یک قانون CSS برای a داریم ::before شبه عنصر روی یک دکمه:
button::before {
content: "Click me";
color: blue;
}
ما می توانیم این قانون را با استفاده از جاوا اسکریپت انتخاب کنیم document.styleSheets و cssRules خواص در اینجا به این صورت است:
let styleSheet = document.styleSheets(0); // Select the first stylesheet
let cssRule;
for (let rule of styleSheet.cssRules) {
if (rule.selectorText === 'button::before') {
cssRule = rule;
break;
}
}
console.log(cssRule.style.content); // Outputs: "Click me"
در کد بالا ابتدا اولین stylesheet سند را انتخاب می کنیم. سپس، روی cssRules آن را تکرار می کنیم تا با انتخابگر ‘button::before’ قانون را پیدا کنیم. وقتی قانون را پیدا کردیم، می‌توانیم با استفاده از آن به استایل‌های آن دسترسی پیدا کنیم style ویژگی.
در حالی که این روش کار می کند، بسیار کارآمد نیست، زیرا ما را ملزم می کند که همه آنها را حلقه بزنیم cssRules. در یک برنامه بزرگ با شیوه نامه/قوانین زیاد، این احتمالاً خوب عمل نمی کند. بنابراین توصیه می شود از این روش به مقدار کم و فقط در مواقع ضروری استفاده کنید.
دستکاری عناصر شبه با استفاده از جاوا اسکریپت
در جاوا اسکریپت، دستکاری شبه عناصر کمی مشکل است زیرا آنها مستقیماً بخشی از مدل شیء سند (DOM) نیستند. با این حال، هنوز هم می توانیم با کمی خلاقیت آنها را اصلاح کنیم. ما نمی‌توانیم شبه عناصر را مستقیماً در جاوا اسکریپت انتخاب کنیم، اما می‌توانیم سبک‌های آنها را از طریق CSSStyleSheet.insertRule() روش.
فرض کنید یک پاراگراف با شناسه “مثال” و a داریم ::before شبه عنصر:
<p id="example">Hello, rasanegar readers!</p>
#example::before {
content: "Greetings! ";
}
حال، فرض کنید می خواهیم محتوای آن را تغییر دهیم ::before شبه عنصر به “Welcome!” با استفاده از جاوا اسکریپت. در اینجا روش انجام این کار آمده است:
document.styleSheets(0).insertRule("#example::before { content: 'Welcome! '; }", 0);
اینجا، styleSheets(0) به اولین شیوه نامه پیوند/جاسازی شده در سند HTML اشاره دارد. این insertRule() متد دو پارامتر دارد: قانون CSS که باید درج شود و شاخصی که در آن قانون درج می شود. در این مورد، ما قانون خود را در ابتدای شیوه نامه (شاخص 0) درج می کنیم.
اگر لازم است این قانون جدید را در نهایت حذف کنید، می توانید این کار را انجام دهید document.styleSheets(0).removeRule().
انتخاب / دستکاری عناصر شبه با استفاده از jQuery
وقتی صحبت از jQuery می شود، وضعیت مشابه است. ما نمی توانیم به طور مستقیم شبه عناصر را انتخاب کنیم. اما هنوز هم می‌توانیم با دستکاری قوانین CSS که برای آنها اعمال می‌شود، از این موضوع دور شویم. jQuery یک متد داخلی مانند این ندارد insertRule()، اما می توانیم از آن استفاده کنیم $('style') انتخابگر برای اضافه کردن یک قانون جدید به شیوه نامه ما.
بیایید از همان HTML و CSS قبلی استفاده کنیم:
<p id="example">Hello, rasanegar readers!</p>
#example::before {
content: "Greetings! ";
}
حالا بیایید محتوای آن را تغییر دهیم ::before شبه عنصر “Welcome!” با استفاده از jQuery:
$('style').append("#example::before { content: 'Welcome! '; }");
با append() روش، یک قانون جدید به انتهای شیوه نامه خود اضافه می کنیم. این قانون قانون قبلی را لغو می کند #example::before، که منجر به تغییر محتوا می شود.
جایگزین هایی برای دستکاری عناصر شبه CSS
استفاده از ویژگی ها
راه حل دیگری که پیشنهاد شده است، و احتمالاً بهتر از آنچه در بالا نشان دادیم، استفاده از ویژگی عنصر برای تعیین محتوای قبل و بعد است. مثلا:
#example::before {
content: attr(data-before);
}
<p id="example" data-before="Greetings! ">Hello, rasanegar readers!</p>
این attr() متد هر متنی را که در آن داده می شود انتخاب می کند data-before ویژگی عنصر با استفاده از این، می توانید متن را در قسمت تغییر دهید data-before ویژگی، که سپس آنچه را که عناصر شبه نشان می دهند تغییر می دهد.
$('#example').click(function() {
$(this).attr('data-content', 'Welcome! ');
});
استفاده از کلاس ها
روش معقول دیگر این است که فقط از کلاس های CSS استفاده کنید، که ممکن است کاری باشد که در حال حاضر در برنامه خود انجام می دهید. می‌توانید کلاس‌هایی را اضافه/حذف کنید ::before یا ::after انتخابگرها، بنابراین به شما کمک می کند تا رفتار عناصر شبه را دستکاری کنید. به اندازه آخرین گزینه انعطاف پذیری نمی دهد، اما راه حلی آشنا و ساده برای یک مشکل دشوار است.
نتیجه
در این مقاله نگاهی به شبه عناصر CSS و روش تعامل با آنها با استفاده از جاوا اسکریپت و جی کوئری انداختیم. ما آموخته‌ایم که اگرچه شبه عناصر در واقع بخشی از DOM نیستند و نمی‌توان آنها را مستقیماً انتخاب کرد، اما همچنان می‌توانیم آنها را با تغییر پویا قوانین CSS که با آنها مرتبط هستند دستکاری کنیم.
در حالی که شبه عناصر می توانند مفید باشند، ممکن است بخواهید در صورت امکان از استفاده از آنها اجتناب کنید، حداقل زمانی که نیاز به دستکاری مقادیر آنها دارید. آنها جایگزینی برای عناصر معنایی HTML نیستند و نباید برای افزودن محتوایی که برای شما مهم است استفاده شوند page.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-28 16:37:03
