Window getComputedStyle() विधि

वर्णन और उपयोग

getComputedStyle() विधि HTML तत्व के कम्प्यूटेड सीएसएस गुण और गुणवैधता प्राप्त करती है。

getComputedStyle() विधि एक सीएसएसटाइलडेक्लेयर ऑब्जेक्ट रिटर्न करती है。

कम्प्यूटेड स्टाइल

कम्प्यूटेड स्टाइल तत्व पर सभी स्टाइल स्रोत के बाद वर्तमान में इस्तेमाल किए जाने वाले स्टाइलों को कहते हैं。

स्टाइल स्रोत: बाहरी और आंतरिक स्टाइल तालिकाएँ, विरासत स्टाइल और ब्राउज़र डिफ़ॉल्ट स्टाइल

दृष्टिगोचर:

CSSStyleDeclaration ऑब्जेक्ट

उदाहरण

उदाहरण 1

तत्व का कम्प्यूटेड बैकग्राउंड रंग प्राप्त करें:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

खुद इसे प्रयोग करें

उदाहरण 2

तत्व से सभी कम्प्यूटेड स्टाइल प्राप्त करें:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

खुद इसे प्रयोग करें

उदाहरण 3

तत्व में पहली अक्षर का कम्प्यूटेड फ़ॉन्ट आकार (उपचारक इलेक्ट्रॉन) प्राप्त करें:

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

खुद इसे प्रयोग करें

व्याकरण

window.getComputedStyle(element, pseudoElement)

पारामीटर

पारामीटर वर्णन
element अनिवार्य। जिसके लिए कम्प्यूटेड स्टाइल प्राप्त करना है के लिए तत्व
pseudoElement वैकल्पिक। जिसके लिए प्सेयोएलीमेंट प्राप्त करना है।

रिटर्न वैल्यू

क़िस्म वर्णन
ऑब्जेक्ट सभी सीएसएस गुण और गुणवैधता वाले सीएसएसटाइलडेक्लेयर ऑब्जेक्ट

गेटकम्प्यूटेडस्टाइल() विधि और स्टाइल अटीब्यूट के अंतर

गेटकम्प्यूटेडस्टाइल() विधि और HTMLElement के स्टाइल अटीब्यूट को तुलना करें: दूसरा केवल तत्व के इनलाइन स्टाइल की पहुंच की अनुमति देता है, आपके द्वारा निर्दिष्ट किसी भी इकाई का उपयोग किया जा सकता है, और, यह आपको तत्व के स्टाइल तालिका स्टाइल के वर्तमान इस्तेमाल की कोई जानकारी नहीं देता है।

ब्राउज़र समर्थन

सभी ब्राउज़र्स इसका समर्थन करते हैं getComputedStyle()बोली

च्रोम आईई एज फायरफॉक्स सफारी ऑपेरा
च्रोम आईई एज फायरफॉक्स सफारी ऑपेरा
समर्थन 9-11 समर्थन समर्थन समर्थन समर्थन