CSS जेसक्रिप्ट के द्वारा वेरिएबल बदलना

वेरियेबल बदलने के लिए JavaScript

CSS वेरियेबल DOM को पहुंच सकते हैं, इसलिए आप इन्हें JavaScript के द्वारा बदल सकते हैं.

यह उदाहरण दर्शाता है कि कैसे स्क्रिप्ट को बनाया जाता है जो पिछले पृष्ठ में इस्तेमाल किए गए --blue वेरियेबल को दिखाता और बदलता है. अगर आप JavaScript से अनभिज्ञ हैं, तो चिंता करें नहीं. आपको JavaScript के बारे में अधिक जानकारी JavaScript ट्यूटोरियल में मिल सकती है:

उदाहरण

<स्क्रिप्ट>
// रूट एलीमेंट प्राप्त करें
वार आर = डॉक्युमेंट.क्वेरीसेलेक्टर(':रूट');
// वेरियेबल के मूल्य प्राप्त करने के लिए फ़ंक्शन बनाएं
फ़ंक्शन माइफ़नक्शन_गेट() {
  // रूट के लिए स्टाइल्स (प्रोपर्टीज और मूल्य) प्राप्त करें
  वार रएस = getComputedStyle(r);
  // --blue वेरियेबल के मूल्य को अलर्ट करें
  अलर्ट("--blue के मूल्य: " + rs.getPropertyValue('--blue'));
}
// Create a function to set the value of the variable
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

खुद आजीविका करें

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

शेडूल में उल्लिखित संख्याएं पूर्णता से इस अट्रिब्यूट का समर्थन करने वाले पहले ब्राउज़र का संस्करण को सूचित करती हैं。

फ़ंक्शन
var() 49.0 15.0 31.0 9.1 36.0

CSS var() फ़ंक्शन

फ़ंक्शन वर्णन
var() CSS वेरिएबल के मान को जोड़ें。