आपको लगता है कि यह जवाब देने के लिए एक सरल सवाल होगा, बाकी सब कुछ जो jQuery कर सकता है। दुर्भाग्य से, समस्या एक तकनीकी समस्या के लिए नीचे आती है: सीएसएस: के बाद और: नियमों से पहले डोम का हिस्सा नहीं हैं, और इसलिए jQuery के डोम तरीकों का उपयोग करके बदला नहीं जा सकता है।
वहाँ रहे हैं इन JavaScript और / या सीएसएस समाधान का उपयोग कर तत्वों में हेरफेर करने के तरीके; जो आप उपयोग करते हैं वह आपकी सटीक आवश्यकताओं पर निर्भर करता है।
मैं उस चीज़ से शुरू करने जा रहा हूँ जिसे व्यापक रूप से "सर्वश्रेष्ठ" दृष्टिकोण माना जाता है:
1) एक पूर्व निर्धारित वर्ग को जोड़ें / निकालें
इस दृष्टिकोण में, आपने पहले ही अपने सीएसएस में एक अलग :afterया :beforeशैली के साथ एक वर्ग बनाया है । इस "नए" वर्ग को बाद में अपनी स्टाइलशीट में रखें यह सुनिश्चित करने के लिए कि यह ओवरराइड करता है:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
फिर आप इस वर्ग को jQuery (या वेनिला जावास्क्रिप्ट) का उपयोग करके आसानी से जोड़ या हटा सकते हैं:
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- पेशेवरों: jQuery के साथ लागू करने के लिए आसान; जल्दी से एक बार में कई शैलियों को बदल देता है; चिंताओं को अलग करने में मदद करता है (अपने HTML से अपने CSS और JS को अलग करना)
- विपक्ष: सीएसएस पूर्व लिखा होना चाहिए, की सामग्री तो
:beforeया :afterपूरी तरह से गतिशील नहीं है
2) दस्तावेज़ की स्टाइलशीट में सीधे नई शैली जोड़ें
दस्तावेज़ स्टाइलशीट, शैलियों :afterऔर :beforeशैलियों सहित सीधे शैलियों को जोड़ने के लिए जावास्क्रिप्ट का उपयोग करना संभव है । jQuery एक सुविधाजनक शॉर्टकट प्रदान नहीं करता है, लेकिन सौभाग्य से JS वह जटिल नहीं है:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()और संबंधित .insertRule()विधियां आज काफी अच्छी तरह से समर्थित हैं।
भिन्नता के रूप में, आप दस्तावेज़ में पूरी तरह से नई स्टाइलशीट जोड़ने के लिए jQuery का भी उपयोग कर सकते हैं, लेकिन आवश्यक कोड कोई क्लीनर नहीं है:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
यदि हम मूल्यों को "जोड़-तोड़" करने के बारे में बात कर रहे हैं, न केवल उन्हें जोड़ने के लिए, हम एक अलग दृष्टिकोण का उपयोग करके मौजूदा या शैलियों को भी पढ़:after:before सकते हैं :
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
हम जगह ले सकता है document.querySelector('p')के साथ $('p')[0]जब jQuery का उपयोग कर, थोड़ा कम कोड के लिए।
- पेशेवरों: किसी भी स्ट्रिंग को शैली में गतिशील रूप से डाला जा सकता है
- विपक्ष: मूल शैलियों में परिवर्तन नहीं किया गया है, बस ओवरराइड किया गया है; दोहराया (ab) उपयोग DOM को मनमाने ढंग से बड़ा कर सकता है
3) एक अलग डोम विशेषता को बदल दें
आप किसी विशेष DOM विशेषता को पढ़ने के लिए अपने CSS में भी उपयोगattr() कर सकते हैं । ( यदि कोई ब्राउज़र समर्थन करता है :before, तो यह भी समर्थन करता है attr()। ) content:कुछ सावधानी से तैयार किए गए CSS में इसे जोड़कर , हम और गतिशील रूप से सामग्री को बदल सकते हैं (लेकिन अन्य गुण नहीं, जैसे मार्जिन या रंग)।:before:after
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
जे एस:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
इसे दूसरी तकनीक के साथ जोड़ा जा सकता है यदि सीएसएस समय से पहले तैयार नहीं किया जा सकता है:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- पेशेवरों: अंतहीन अतिरिक्त शैलियों का निर्माण नहीं करता है
- विपक्ष:
attr CSS में केवल सामग्री स्ट्रिंग्स पर लागू हो सकता है, URL या RGB रंगों पर नहीं