तत्वों की शैलियों को संशोधित करना आसान है लेकिन मूल्य को पढ़ने के लिए थोड़े मुश्किल।
जावास्क्रिप्ट किसी भी तत्व शैली की संपत्ति (elem.style) को css (आंतरिक / बाहरी) से नहीं पढ़ सकता है जब तक कि आप जावास्क्रिप्ट में निर्मित मेक कॉल getComputedStyle का उपयोग न करें।
getComputedStyle (तत्व [, छद्म])
तत्व: के लिए मान पढ़ने के लिए तत्व।
छद्म: एक छद्म तत्व यदि आवश्यक हो, उदाहरण के लिए :: पहले। एक रिक्त स्ट्रिंग या कोई तर्क का अर्थ तत्व ही नहीं है।
परिणाम शैली गुणों के साथ एक वस्तु है, जैसे एलएम.स्टाइल, लेकिन अब सभी सीएसएस वर्गों के संबंध में।
उदाहरण के लिए, यहाँ शैली मार्जिन नहीं देखती है:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
तो अपने javaScript कोड को संशोधित करने के लिए इसमें उस तत्व का getComputedStyle शामिल करें जिसे आप प्राप्त करना चाहते हैं, यह चौड़ाई / ऊंचाई या अन्य विशेषता है
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
संगणित और सुलझे हुए मूल्य
CSS में दो अवधारणाएँ हैं:
सीएसएस कैस्केड के परिणामस्वरूप सभी सीएसएस नियमों और सीएसएस वंशानुक्रम लागू होने के बाद एक गणना शैली मूल्य मूल्य है। यह ऊंचाई की तरह दिख सकता है: 1em या फ़ॉन्ट-आकार: 125%।
एक हल की गई स्टाइल वैल्यू वह है जो अंततः तत्व पर लागू होती है। मान जैसे 1em या 125% सापेक्ष हैं। ब्राउज़र गणना मूल्य लेता है और सभी इकाइयों को निश्चित और निरपेक्ष बनाता है, उदाहरण के लिए: ऊँचाई: 20px या फ़ॉन्ट-आकार: 16px। ज्यामिति गुणों के लिए हल किए गए मानों में एक अस्थायी बिंदु हो सकता है, जैसे चौड़ाई: 50.5px।
एक लंबे समय पहले getComputedStyle को कम्प्यूटेड मान प्राप्त करने के लिए बनाया गया था, लेकिन यह पता चला कि हल किए गए मान बहुत अधिक सुविधाजनक हैं, और मानक बदल गया है।
इसलिए आजकल getComputedStyle वास्तव में संपत्ति का सुलझा हुआ मूल्य लौटाता है।
कृपया ध्यान दें:
getComputedStyle को पूरी प्रॉपर्टी के नाम की आवश्यकता होती है
आपको हमेशा सटीक संपत्ति के लिए पूछना चाहिए जो आप चाहते हैं, जैसे पेडिंग लाईट या ऊंचाई या चौड़ाई। अन्यथा सही परिणाम की गारंटी नहीं है।
उदाहरण के लिए, अगर वहाँ गुण गद्दी / गद्दी से ऊपर हैं, तो हमें getComputedStyle (हाथी) के लिए क्या मिलना चाहिए। कुछ भी नहीं, या शायद ज्ञात पैडिंग से "उत्पन्न" मूल्य? यहां कोई मानक नियम नहीं है।
अन्य विसंगतियां हैं। एक उदाहरण के रूप में, कुछ ब्राउज़र (क्रोम) नीचे दिए गए दस्तावेज़ में 10px दिखाते हैं, और उनमें से कुछ (फ़ायरफ़ॉक्स) - नहीं:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
अधिक जानकारी के लिए https://javascript.info/styles-and-classes