जावास्क्रिप्ट में HTML तत्वों के लिए सीएसएस संपत्ति मान प्राप्त करें

वेब विकास में, सीएसएस गुणों को गतिशील रूप से हेरफेर करने से उपयोगकर्ता अनुभव और इंटरफ़ेस बढ़ सकता है। जावास्क्रिप्ट के साथ, इन गुणों तक पहुंच आसान है। लेआउट।" जावास्क्रिप्ट का उपयोग करके इसे कैसे प्राप्त किया जाए:

विकल्प 1: दस्तावेज़ स्टाइल शीट्स को पार्स करना (अनुशंसित नहीं)

स्पष्टीकरण:

इस पद्धति में दस्तावेज़ के माध्यम से मैन्युअल रूप से पुनरावृत्ति शामिल है .styleSheets ऑब्जेक्ट और वांछित संपत्ति की खोज के लिए इसकी सामग्री को पार्स करना। हालाँकि, इस दृष्टिकोण की अनुशंसा नहीं की जाती है क्योंकि यह बोझिल हो सकता है, विशेष रूप से जटिल सीएसएस फ़ाइलों के लिए या जब आपको कई तत्वों के लिए गुणों को पुनः प्राप्त करने की आवश्यकता होती है।
विकल्प 2: तत्व का अनुकरण करना और गणना की गई शैली का उपयोग करना (पसंदीदा)

स्पष्टीकरण:

यह विधि अधिक कुशल है और सटीक परिणाम प्रदान करती है। इसमें लक्ष्य तत्व के समान वर्ग नाम के साथ एक तत्व बनाना और फिर बनाए गए तत्व की गणना की गई शैली तक पहुंच शामिल है। गणना की गई शैली तत्व पर लागू वास्तविक शैली का प्रतिनिधित्व करती है, जिसमें विरासत में मिली शैली और उपयोगकर्ता स्टाइलशीट या जावास्क्रिप्ट के माध्यम से किए गए कोई भी संशोधन शामिल हैं।

जावास्क्रिप्ट कोड:

फ़ंक्शन getStyleProp(elem, प्रोप) { यदि (window.getComputedStyle) { वापसी window.getComputedStyle(elem, null).getPropertyValue(prop); } अन्यथा यदि (elem.currentStyle) { वापसी elem.currentStyle[prop]; //आईई अनुकूलता } } window.onload = फ़ंक्शन () { var d = document.createElement("div"); // एक div तत्व बनाएं d.className = "लेआउट"; // क्लास का नाम सेट करें चेतावनी(getStyleProp(d, "रंग")); // "रंग" गुण पुनः प्राप्त करें };

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

यदि आप इनलाइन शैली परिभाषाओं के बिना विरासत में मिली शैली गुणों को पुनः प्राप्त करना चाहते हैं, तो आप अस्थायी रूप से इनलाइन शैलियों को हटा सकते हैं और फिर विरासत में मिले मूल्यों को पुनः प्राप्त कर सकते हैं।

जावास्क्रिप्ट कोड:

function getNonInlineStyle(elem,prop) { var शैली = elem.cssText; // इनलाइन स्टाइल को कैश करें elem.cssText = ""; // इनलाइन शैलियाँ हटाएँ var इनहेरिटेडप्रॉपवैल्यू = getStyleProp(elem, प्रोप); // विरासत में मिला मूल्य पुनः प्राप्त करें elem.cssText = शैली; // इनलाइन शैली पुनर्स्थापित करें विरासत में मिला PropValue लौटाएँ; }