var()

Question

में गतिशील गुण नाम कैसे सेट करें मैं attr() जैसे गतिशील मानों के आधार पर कस्टम गुणों का उपयोग करने का प्रयास कर रहा हूं।

उदाहरण के लिए, नीचे दिए गए कोड में, मैंने वर्तमान तत्व के id विशेषता के आधार पर दोनों कस्टम-गुणों तक पहुंचने का प्रयास किया।

:root{ 
 
    --app-foo: 'Hello'; 
 
    --app-bar: 'World'; 
 
    } 
 
div::after{ 
 
/* expected : 
 
      'Hello' for #foo 
 
      'World' for #bar */ 
 
    content: var('--app-'attr(id)); 
 
    }

<div id="foo"></div> 
 
<div id="bar"></div>

लेकिन यह स्पष्ट रूप से विफल रहता है।

क्या यह हासिल करने का कोई तरीका है?

Answer 1

grammarvar() अभिव्यक्ति के पहले तर्क को किसी भी कस्टम प्रॉपर्टी नाम पर हार्डकोड करने की अनुमति नहीं देता है। इसका अर्थ यह है कि आप किसी कस्टम नाम को var() सीएसएस का उपयोग करके अभिव्यक्ति में संदर्भित नहीं कर सकते हैं, क्योंकि यह एक संपत्ति नाम के लिए स्ट्रिंग (या एक attr() स्ट्रिंग लौटने वाली अभिव्यक्ति) स्वीकार नहीं करता है। आपको जेएस का उपयोग कर var() अभिव्यक्ति वाले मान को सेट करने की आवश्यकता होगी।