getComputedStyle() मेथड एक ऑब्जेक्ट देता है जिसमें टारगेट एलिमेंट पर लागू सभी स्टाइल शामिल होते हैं।
उदाहरण
निम्नलिखित उदाहरण दर्शाते हैं कि हम JavaScript का उपयोग करके CSS वेरिएबल्स को कैसे प्राप्त और सेट कर सकते हैं।
<!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>आउटपुट
यह निम्न परिणाम देगा:
