محمد - ز
3 سال پیش توسط محمد - ز مطرح شد
3 پاسخ

تغییر متغییر css با جاوا اسکریپت

سلام دوستان وقتتون بخیر . سوالی داشتم در مورد تغییر دادن مقادیر متغییر های css .
بنده برای ایجاد دارک مود تو سایت چندتا متغییر css تعریف کردم به شکل زیر:

:root{
    --primary-color : #FFB830;
    --secondary-color: #3DB2FF;
    --text-color : #11052C;
}

بعد برا تغییرشون با جاوا اسکریپت فانکشنی ایجادکردم که هنگام کلیک روی آیکون تغییر تم اجرا میشه

darkModeIcon.addEventListener("click",()=>{
    var root = document.querySelector(':root');
    root.style.setProperty('--primary-color','#323F48');
    root.style.setProperty('--secondary-color','#1F2933');
    root.style.setProperty('--table-text','#ffffff');
})

اما به مشکلی برخوردم که وقتی رو آیکون کلیک میکنم تم تغییر میکنه اما دیگه هنگام کلیک دوباره برنمیگرده به تم لایت . آیا روشی هست که بتونم این مشکلو حل کنم؟


ثبت پرسش جدید
مهران مرندی
تخصص : برنامه نویس
@mehranmarandi 3 سال پیش مطرح شد
1

فكر ميكنم بهتر اين باشه كه اين استايل ها رو به دو كلاس مختلف بديد و با js فقط كلاس تگ body رو عوض كنيد


محمد - ز
تخصص : در حال یادگیری :)
@mrx 3 سال پیش مطرح شد
0

ممنون از پاسختون.راستش این استایل هارو میخاستم به تگ thead و tbody یه جدول بدم و ابتدا به روشی که گفتید دوتا کلاس ساختم و با classList.toggle کلاس هارو بهشون دادم هنگام کلیک ولی متاسفانه رو جدول عمل نکرد نمیدونم مشکل از کجا بود


Banana Life
@shift.delete 3 سال پیش مطرح شد
0

در قسمت addEventListener شما فقط دستور اخر اجرا میشه

<body>
    <style>

        .middle {
         text-align: center;
         margin: 10%;
        }

       .green {
         color: green;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }

    </style>

    <div class="middle">
    <button>Change Color</button>
    <h1>Color one</h1>

    </div>

    <script>

        var btn = document.querySelector("button");
        btn.addEventListener('click', ()=>{

         document.querySelector('h1').classList.toggle('red');     

        });
    </script>
</body>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام