JavaScript के साथ CSS वेरिएबल्स को प्राप्त करना और सेट करना

getComputedStyle() मेथड एक ऑब्जेक्ट देता है जिसमें टारगेट एलिमेंट पर लागू सभी स्टाइल शामिल होते हैं। getPropertyValue() मेथड का उपयोग कंप्यूटेड स्टाइल से वांछित प्रॉपर्टी प्राप्त करने के लिए किया जाता है। setProperty() का उपयोग CSS वेरिएबल का मान बदलने के लिए किया जाता है।

उदाहरण

निम्नलिखित उदाहरण दर्शाते हैं कि हम JavaScript का उपयोग करके CSS वेरिएबल्स को कैसे प्राप्त और सेट कर सकते हैं।

<!DOCTYPE html> <html> <head> <style> :root {    --outerColor: magenta;    --innerColor: lightgreen;    text-align: center; } div {    margin: 5%;    padding: 10%;    background-color: var(--innerColor);    border: 2px groove var(--outerColor); } </style> </head> <body> <div onmouseover="showColor()" onmouseout="changeColor()"> <p></p> </div> </body> <script> let ele = document.querySelector(':root'); let para = document.querySelector('p'); function showColor() {    let cs = getComputedStyle(ele);    para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color"); } function changeColor() {    let item = document.querySelector('div');    item.style.setProperty('--innerColor', 'magenta') } </script> </html>

आउटपुट

यह निम्न परिणाम देगा:

उदाहरण

<!DOCTYPE html> <html> <head> <style> :root {    --customColor: seagreen; } div {    margin: 5%;    width: 130px;    height: 130px;    box-shadow: inset 0 0 38px var(--customColor);    border-radius: 50%; } </style> </head> <body> <div onmouseover="toggle()"></div> </body> <script> let ele = document.querySelector(':root'); function toggle() {    let cs = getComputedStyle(ele);    let item = document.querySelector('div');    if(cs.getPropertyValue('--customColor') !== 'blue') {       item.style.setProperty('--customColor', 'blue')    } } </script> </html>

आउटपुट

यह निम्न परिणाम देगा: