अगर मैं निम्नलिखित करता हूं:

$('.js-element').attr("data-count", 2)

तो मैं उस मान को सीएसएस का उपयोग करके दिखा सकता हूं:

.js-element:after {
    content: attr(data-count);
}

लेकिन अगर मैं निम्नलिखित करता हूं:

$('.js-element').data("count", 2)

तो वही सीएसएस कोड कुछ भी नहीं दिखाता है।

जैसा कि मैं अंतर को समझता हूं कि पहले मामले में मैं केवल HTML तत्व पर एक विशेषता सेट कर रहा हूं जो कि मैं डेटा के साथ उपसर्ग करता हूं, जबकि दूसरे मामले में मैं HTML तत्व की डेटासेट संपत्ति सेट कर रहा हूं।

मेरे प्रश्न हैं:

  • क्या किसी एक तरीके को दूसरे से बेहतर माना जा सकता है?
  • मैं डेटासेट से मान दिखाने के लिए CSS कैसे प्राप्त कर सकता हूं?
6
user1283776 13 जून 2018, 13:04

2 जवाब

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

जैसा कि मैं अंतर को समझता हूं कि पहले मामले में मैं केवल HTML तत्व पर एक विशेषता सेट कर रहा हूं जो मैं डेटा के साथ उपसर्ग करता हूं

हां

जबकि दूसरे मामले में मैं HTML तत्व की डेटासेट प्रॉपर्टी सेट कर रहा हूं।

नहीं। आप jQuery का आंतरिक डेटा स्टोर सेट कर रहे हैं।

क्या किसी एक तरीके को दूसरे से बेहतर माना जा सकता है?

वह व्यक्तिपरक है

मैं डेटासेट से मान दिखाने के लिए CSS कैसे प्राप्त कर सकता हूं?

डेटासेट मान (document.querySelector('.js-element').dataset.count = 2) सेट करें, जो स्वचालित रूप से विशेषता पर मैप करेगा।

4
Quentin 13 जून 2018, 13:09
  1. उपयोग-मामले और सीमाओं के अधीन।

    element.dataset - इसमें केवल कस्टम data-* विशेषताएँ शामिल हैं।

    jQuery's data() - उपयोग किए गए संस्करण के आधार पर इसकी कार्यक्षमता स्थगित हो जाती है। संस्करण 1.4.3 तक, .data() केवल .data(key, value) के माध्यम से सेट किए गए कस्टम मनमाना मान लौटाता है। 1.4.4 से jQuery संस्करण, यह एक ही वस्तु के रूप में dataset और .data(key, value) के माध्यम से निर्धारित मान दोनों लौटाता है। अधिक जानकारी के लिए jQuery .data() डॉक्स देखें।

    सीमा: jQuery's data() object, embed और applet तत्वों पर मान सेट नहीं कर सकते, लेकिन उनमें dataset हो सकते हैं।

  2. dataset मान HTML DOM एलिमेंट से लिए गए हैं या जावास्क्रिप्ट/jquery या किसी अन्य माध्यम से गतिशील रूप से सेट किए जा सकते हैं।

var elem = document.querySelector("#para");
setTimeout(function(){
    elem.dataset.before="Modified Before Content";
    elem.dataset.after="Modified After Content";
},1000);
p::before
{
    content : attr(data-before)
}
p::after
{
    content : attr(data-after)
}
<p id="para" data-before="Before Content" data-after="After Content">
  <br>
  Middle
  <br>
</p>

तत्व के डेटासेट तक CSS Accessसीमित है छद्म तत्वों के लिए, हालांकि इसे W3 युक्ति के अनुसार सभी तत्वों पर लागू किया जा सकता है. लेकिन इसे सभी प्रमुख ब्राउज़रों द्वारा लागू नहीं किया गया है।

1
Vignesh Raja 13 जून 2018, 14:06