متغیرهای CSS به DOM دسترسی دارند، به این معنی که شما می‌توانید آن‌ها را با جاوااسکریپت تغییر دهید.
مثال
در این مثال، یک اسکریپت ساخته شده است که مقدار متغیر --blue را نمایش می‌دهد و همچنین می‌تواند مقدار آن را تغییر دهد. نگران نباشید اگر با جاوااسکریپت آشنا نیستید، می‌توانید در آموزش جاوااسکریپت بیشتر یاد بگیرید.
کد جاوااسکریپت برای تغییر متغیرهای CSS:
<script>
// گرفتن عنصر ریشه (root)
var r = document.querySelector(':root');
// ایجاد تابع برای دریافت مقدار متغیر
function myFunction_get() {
// گرفتن استایل‌های عنصر ریشه
var rs = getComputedStyle(r);
// نمایش مقدار متغیر --blue با استفاده از alert
alert("مقدار --blue برابر است با: " + rs.getPropertyValue('--blue'));
}
// ایجاد تابع برای تنظیم مقدار متغیر
function myFunction_set() {
// تنظیم مقدار جدید برای متغیر --blue (در این مثال "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>توضیحات:
-
گرفتن عنصر ریشه:
- با استفاده از
document.querySelector(':root')، عنصر ریشه‌ی CSS (یعنی:root) را انتخاب می‌کنیم که شامل متغیرهای سراسری است.
- با استفاده از
-
تابع برای دریافت مقدار متغیر:
-
تابع برای تنظیم مقدار متغیر:
- با استفاده از
style.setProperty()، مقدار متغیر--blueبه مقدار جدید (در اینجا “lightblue”) تغییر داده می‌شود.
- با استفاده از
نحوه استفاده:
- برای دریافت مقدار متغیر، تابع
myFunction_get()را صدا بزنید. - برای تغییر مقدار متغیر، تابع
myFunction_set()را صدا بزنید.
این قابلیت به شما اجازه می‌دهد که به صورت داینامیک و بدون نیاز به تغییر مستقیم CSS، مقادیر استایل‌ها را با جاوااسکریپت تغییر دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام