मैं jQuery का उपयोग करके CSS स्टाइल की सामग्री संपत्ति को गतिशील रूप से सेट करने का प्रयास कर रहा हूं। निम्नलिखित फिडल में, मैं स्क्रिप्ट निष्पादित होने के बाद आउटपुट को "100% पूर्ण" पढ़ना चाहता हूं।

जेएस फिडल

मैंने सीएसएस चयनकर्ताओं के लगभग हर संयोजन की कोशिश की है जिसके बारे में मैं सोच सकता था, और बुरी तरह विफल रहा हूं।

एचटीएमएल

<div data-chart="1">
  <div class="chart"><span> Completed</span></div>
</div>

सीएसएस

[data-chart="1"] .chart:before {
  content: "50%";
}

जे एस

// This obviously doesn't work
$('[data-chart="1"] .donut-chart:before').css('content', '100%');

किसी भी मार्गदर्शन के लिए धन्यवाद!

0
RobertFrenette 11 अक्टूबर 2021, 19:16
आह, मैंने इसके बारे में सोचा भी नहीं था (छद्म तत्व डोम का हिस्सा नहीं हैं)। अब सही समझ में आता है, धन्यवाद।
 – 
RobertFrenette
11 अक्टूबर 2021, 19:31

1 उत्तर

सबसे बढ़िया उत्तर

जैसा कि टिप्पणियों में लिंक की गई प्रासंगिक पोस्ट के कुछ उत्तरों में दिखाया गया है, आप CSS में attr() फ़ंक्शन का उपयोग कर सकते हैं:

[data-chart="1"] .chart:before {
  content: attr(data-before);
}

और सामग्री को इस तरह बदलें:

$('[data-chart=1] .chart').attr('data-before', '100%');

https://jsfiddle.net/5jrL8g19/

0
Mark 11 अक्टूबर 2021, 19:55