GetComputedStyle () विधि एक वस्तु देती है जिसमें लक्ष्य तत्व पर लागू सभी शैलियाँ शामिल होती हैं।
उदाहरण
निम्नलिखित उदाहरण बताते हैं कि कैसे हम जावास्क्रिप्ट का उपयोग करके सीएसएस चर प्राप्त कर सकते हैं और सेट कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 4%;
padding: 4%;
width: 50%;
text-align: center;
background-color: powderblue;
border-radius: 4%;
}
</style>
</head>
<body>
<div>Test Div</div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.');
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 4%;
padding: 4%;
width: 20vh;
height: 20vh;
box-shadow: inset 0 0 23px cadetblue;
border: 2px groove green;
border-radius: 50%;
}
</style>
</head>
<body>
<div><div></div></div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.');
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
