GetComputedStyle () विधि एक वस्तु देती है जिसमें लक्ष्य तत्व पर लागू सभी शैलियाँ शामिल होती हैं। getPropertyValue() विधि का उपयोग गणना की गई शैलियों से वांछित संपत्ति प्राप्त करने के लिए किया जाता है। CSS वेरिएबल के मान को बदलने के लिए setProperty() का उपयोग किया जाता है।
उदाहरण
निम्नलिखित उदाहरण बताते हैं कि कैसे हम जावास्क्रिप्ट का उपयोग करके सीएसएस चर प्राप्त कर सकते हैं और सेट कर सकते हैं।
<!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> आउटपुट
यह निम्नलिखित परिणाम देगा -
