दिलचस्प पोस्ट
इकाई फ़्रेमवर्क संग्रहित प्रक्रिया तालिका मान पैरामीटर एसवीजी के चाप पथ के साथ सर्कल ड्राइंग जावास्क्रिप्ट के साथ एक तत्व का वर्ग बदलें शरीर में तेजी के साथ एक POST अनुरोध कैसे भेजें आपकी पसंदीदा PHP तैनाती रणनीति क्या है? सिम्युलेटर धीमी गति एनिमेशन अब पर हैं? NSLocalizedString का उपयोग करके सर्वोत्तम अभ्यास समान चौड़ाई के दो बटन सेट की सहायता की आवश्यकता आईओएस एप डिस्प्ले रिकॉर्डर निजी एपीआई का उपयोग किए बिना स्क्रीन कैसे रिकार्ड करता है? कैसे वर्तमान स्क्रीन संकल्प का पता लगा? प्रोग्राम को एक दृश्य कैसे छुपाना है? बिल्ड तिथि प्रदर्शित करना रूटर v4 प्रतिक्रिया के साथ नेस्टेड मार्ग एन के समूहों में एक सूची को विभाजित करने का वैकल्पिक तरीका पूर्ण बनाम सापेक्ष स्थिति चौड़ाई और ऊंचाई

सीएसएस छद्म तत्वों का चयन करना और छेड़छाड़ करना जैसे कि :: पहले और :: jQuery का उपयोग करने के बाद

क्या सीएसएस छद्म तत्वों का चयन / हेरफेर करने के लिए कोई रास्ता है जैसे कि ::before और ::after (और एक अर्द्ध-बृहदान्त्र के साथ पुराना संस्करण) jQuery का उपयोग कर रहा है?

उदाहरण के लिए, मेरे स्टाइलशीट में निम्नलिखित नियम हैं:

 .span::after{ content:'foo' } 

JQuery का उपयोग करके मैं 'foo' को 'बार' में कैसे बदल सकता हूं?

वेब के समाधान से एकत्रित समाधान "सीएसएस छद्म तत्वों का चयन करना और छेड़छाड़ करना जैसे कि :: पहले और :: jQuery का उपयोग करने के बाद"

आप डेटा विशेषता के साथ छद्म तत्व को सामग्री भी दे सकते हैं और फिर हेरफेर करने के लिए jQuery का उपयोग कर सकते हैं:

HTML में:

 <span>foo</span> 

JQuery में:

 $('span').hover(function(){ $(this).attr('data-content','bar'); }); 

सीएसएस में:

 span:after { content: attr(data-content) ' any other text you may want'; } 

यदि आप 'अन्य पाठ' को दिखाने से रोकना चाहते हैं, तो आप इस तरह से seucolega के समाधान के साथ इसे जोड़ सकते हैं:

HTML में:

 <span>foo</span> 

JQuery में:

 $('span').hover(function(){ $(this).addClass('change').attr('data-content','bar'); }); 

सीएसएस में:

 span.change:after { content: attr(data-content) ' any other text you may want'; } 

आपको लगता था कि यह जवाब देने के लिए एक सरल सवाल होगा, जो कुछ भी jQuery के कर सकता है। दुर्भाग्य से, समस्या एक तकनीकी मुद्दे पर आती है: सीएसएस: के बाद और: नियमों के पहले DOM का हिस्सा नहीं है, और इसलिए jQuery के DOM विधियों का उपयोग करके परिवर्तित नहीं किया जा सकता।

इन तत्वों को जावास्क्रिप्ट और / या सीएसएस के कामकाज का उपयोग करने के लिए हेरफेर करने के तरीके हैं ; जो आप उपयोग करते हैं वह आपकी सटीक आवश्यकताओं पर निर्भर करता है।


मैं जो "व्यापक" दृष्टिकोण को व्यापक रूप से माना जाता है, उससे शुरू करने जा रहा हूं:

1) एक पूर्व निर्धारित कक्षा जोड़ें / निकालें

इस दृष्टिकोण में, आपने अपने सीएसएस में पहले से एक अलग क्लास बना लिया है :after या :before शैली :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> 

यद्यपि वे सीएसएस के माध्यम से ब्राउज़रों द्वारा प्रदान किए जाते हैं जैसे कि वे अन्य वास्तविक डोम तत्वों की तरह होते हैं, छद्म तत्व स्वयं DOM का हिस्सा नहीं हैं, और इस प्रकार आप उन्हें jQuery के साथ सीधे चुन सकते हैं और हेरफेर नहीं कर सकते (या उस बात के लिए किसी भी जावास्क्रिप्ट एपीआई , चयनकर्ता एपीआई भी नहीं)।

आप इसके चारों ओर हमेशा अन्य तरीकों को ढूंढ सकते हैं, हालांकि, उदाहरण के लिए:

  • शैलियों को एक या अधिक मनमाना वर्गों के छद्म तत्वों पर लागू करना, फिर jQuery का उपयोग कर कक्षाओं के बीच टॉगलिंग करना (एक त्वरित उदाहरण के लिए स्यूकोलेगा का उत्तर देखें) – यह मुहावरेदार तरीका है क्योंकि यह सरल चयनकर्ताओं का उपयोग करता है (जो छद्म तत्व नहीं हैं ) तत्वों और तत्व राज्यों के बीच अंतर करने के लिए, जिस तरह से उनका उपयोग करने का इरादा है

  • दस्तावेज़ स्टाइलशीट को बदलकर, छद्म तत्वों को लागू करने वाली शैलियों को जोड़ना, जो एक हैक से अधिक है

लेकिन फिर भी आप उन तक सीधे पहुंच नहीं सकते हैं क्योंकि अंततः वे केवल प्रतिपादन इंजन के लिए दृश्यमान हैं, और किसी भी स्क्रिप्टिंग एपीआई के माध्यम से उपलब्ध नहीं हैं (संभवत: सीएसएसओम को छोड़कर, जो कि .css() से परे jQuery का खुलासा नहीं होता है जो केवल वास्तविक के लिए काम करता है तत्वों और नहीं छद्म तत्वों या तो)।

यह किसी भी छद्म तत्वों पर लागू होता है जिनकी शैली आप jQuery के साथ संशोधित करने की कोशिश कर रहे हैं, और न केवल :before और :after

आप jQuery में छद्म तत्वों का चयन नहीं कर सकते क्योंकि वे DOM का हिस्सा नहीं हैं। लेकिन आप पिता तत्व को एक विशिष्ट वर्ग जोड़ सकते हैं और सीएसएस में इसके छद्म तत्वों को नियंत्रित कर सकते हैं।

उदाहरण

JQuery में:

 <script type="text/javascript"> $('span').addClass('change'); </script> 

सीएसएस में:

 span.change:after { content: 'bar' } 

क्या ईसाई सुझाव है की रेखा में, आप यह भी कर सकते हैं:

 $('head').append("<style>.span::after{ content:'bar' }</style>"); 

यहां तक ​​पहुंचने का तरीका है: के बाद और: शैली गुणों के पहले, सीएसएस में परिभाषित:

 // Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content'); 

मैंने पहले से ही इस प्रश्न का उत्तर दिया है , लेकिन बहुत अच्छा होने के लिए मैं अपने आप को दोबारा दोहरा दूँगा।

जवाब हाँ और नहीं होना चाहिए आप छद्म चयनकर्ता के माध्यम से एक तत्व का चयन नहीं कर सकते, लेकिन आप जावास्क्रिप्ट के साथ अपने स्टाइलशीट में एक नया नियम जोड़ सकते हैं।

मैंने कुछ किया जो आपके लिए काम करना चाहिए:

 var addRule = function(sheet, selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); }; addRule(document.styleSheets[0], "body:after", "content: 'foo'"); 

http://fiddle.jshell.net/MDyxg/1/

यदि आप: से पहले या :: सुडो तत्वों के सीएसएस के जरिए हेरफेर करना चाहते हैं, तो आप इसे जेएस कर सकते हैं। निचे देखो;

 jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>'); 

ध्यान दें कि <style> तत्व में एक आईडी है, जिसका उपयोग आप इसे हटाने के लिए कर सकते हैं और फिर से जोड़ सकते हैं अगर आपकी शैली गतिशील रूप से बदलती है

इस तरह, आपका तत्व शैली है, ठीक उसी तरह कि जेएस की मदद से आप सीएसएस के माध्यम से इसे चाहते हैं।

यहां एचटीएमएल है:

 <div class="icon"> <span class="play"> ::before </span> </div> 

'पहले' पर गणना की गई शैली content: "VERIFY TO WATCH";

यहां jQuery की मेरी दो पंक्तियाँ हैं, जो एक अतिरिक्त वर्ग को जोड़ने के विचार का उपयोग करती हैं, विशेष रूप से इस तत्व को संदर्भित करती हैं और फिर एक शैली टैग (एक महत्वपूर्ण टैग के साथ) को जोड़ने के लिए sudo-element की सामग्री मान के सीएसएस में परिवर्तन होता है:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");

एक काम कर रहा है, लेकिन बहुत ही कुशल तरीके से नई सामग्री के साथ दस्तावेज़ में एक नियम जोड़ने और कक्षा के साथ इसका संदर्भ देना है। इस बात पर निर्भर करता है कि कक्षा में सामग्री के प्रत्येक मान के लिए एक अद्वितीय आईडी की आवश्यकता हो सकती है।

 $("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head")); $('span').addClass('id-after'); 

आप सभी को धन्यवाद! मैं जो मैं चाहता था, वह कामयाब रहा: डी http://jsfiddle.net/Tfc9j/42/ यहाँ एक नज़र रखना

मुझे आंतरिक डिवी के अस्पष्टता से अलग होने के लिए एक बाह्य डिवीजन की अपारदर्शिता होती है और कुछ जगह पर एक क्लिक के साथ बदलना;) धन्यवाद!

  $('#ena').on('click', function () { $('head').append("<style>#ena:before { opacity:0.3; }</style>"); }); $('#duop').on('click', function (e) { $('head').append("<style>#ena:before { opacity:0.8; }</style>"); e.stopPropagation(); }); #ena{ width:300px; height:300px; border:1px black solid; position:relative; } #duo{ opacity:1; position:absolute; top:50px; width:300px; height:100px; background-color:white; } #ena:before { content: attr(data-before); color: white; cursor: pointer; position: absolute; background-color:red; opacity:0.9; width:100%; height:100%; } <div id="ena"> <div id="duo"> <p>ena p</p> <p id="duop">duoyyyyyyyyyyyyyy p</p> </div> </div> 

आप नकली प्रॉपर्टी बना सकते हैं या मौजूदा एक का उपयोग कर सकते हैं और छद्म-तत्व की स्टाइलशीट में इसे प्राप्त कर सकते हैं।

 var switched = false; // Enable color switching setInterval(function () { var color = switched ? 'red' : 'darkred'; var element = document.getElementById('arrow'); element.style.backgroundColor = color; // Managing pseudo-element's css // using inheritance. element.style.borderLeftColor = color; switched = !switched; }, 1000); 
 .arrow { /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; } .arrow:after { border-top:1em solid transparent; border-right:1em solid transparent; border-bottom:1em solid transparent; border-left:1em solid transparent; /* INHERIT PROPERTY */ border-left-color:inherit; content:""; width:0; height:0; position:absolute; left:100%; top:-50%; } 
 <span id="arrow" class="arrow"></span> 

यह व्यावहारिक नहीं है क्योंकि मैंने इसे वास्तविक दुनिया के उपयोग के लिए नहीं लिखा था, सिर्फ आपको क्या हासिल किया जा सकता है इसका एक उदाहरण देने के लिए।

 css = { before: function(elem,attr){ if($("#cust_style") !== undefined){ $("body").append("<style> " + elem + ":before {" + attr + "} </style>"); } else { $("#cust_style").remove(); $("body").append("<style> " + elem + ":before {" + attr + "} </style>"); } }, after: function(elem,attr){ if($("#cust_style") !== undefined){ $("body").append("<style> " + elem + ":after {" + attr + "} </style>"); } else { $("#cust_style").remove(); $("body").append("<style> " + elem + ":after {" + attr + "} </style>"); } } } 

यह वर्तमान में एक / या एक स्टाइल तत्व जोड़ता है जिसमें आपके आवश्यक गुण होते हैं जो छद्म तत्व के बाद लक्ष्य तत्व पर प्रभाव डालेगा।

इस रूप में इस्तेमाल किया जा सकता है

 css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after 

तथा

 css.before( ... ); // to affect the before pseudo element. 

के बाद के रूप में: और इससे पहले: छद्म तत्व सीधे डीओएम के माध्यम से सुलभ नहीं हैं, वर्तमान में सीएसएस के विशिष्ट मूल्यों को आसानी से संपादित करना संभव नहीं है

मेरा तरीका सिर्फ एक उदाहरण था और अभ्यास के लिए अच्छा नहीं था, आप इसे अपनी कुछ चाल की कोशिश कर सकते हैं और इसे वास्तविक दुनिया के उपयोग के लिए सही कर सकते हैं।

इस तरह से और दूसरों के साथ अपना खुद का प्रयोग करें!

संबंध – आदर्श हेगडे

क्लास या एट्रिब्यूट्स जोड़ना जब आप केवल एक style को सिर में जोड़ सकते हैं

 $('head').append('<style>.span:after{ content:'changed content' }</style>') 

यहां बहुत सारे उत्तर दिए गए हैं लेकिन कोई जवाब सीएसएस के हेरफेर करने में मदद नहीं करता है :before या :after , स्वीकृत भी नहीं।

यहां बताया गया है कि मैं इसे कैसे करना चाहता हूं। मान लीजिए आपका एचटीएमएल इस तरह है:

 <div id="something">Test</div> 

और फिर आप इसे सेट कर रहे हैं: पहले सीएसएस में और इसे डिजाइन करना:

 #something:before{ content:"1st"; font-size:20px; color:red; } #something{ content:'1st'; } 

कृपया ध्यान दें मैं तत्व में तत्व विशेषता भी सेट करता हूं ताकि आप बाद में इसे आसानी से ले सकें। अब एक button क्लिक किया जाता है, जिस पर आप का रंग बदलना चाहते हैं: हरा और उसके फ़ॉन्ट आकार को 30px तक। आप निम्नानुसार प्राप्त कर सकते हैं:

कुछ वर्ग पर अपनी आवश्यक शैली के साथ एक सीएसएस परिभाषित करें। .activeS :

 .activeS:before{ color:green !important; font-size:30px !important; } 

अब आप बदल सकते हैं: शैली को अपनी कक्षा में जोड़कर: तत्व से पहले निम्नानुसार:

 <button id="changeBefore">Change</button> <script> $('#changeBefore').click(function(){ $('#something').addClass('activeS'); }); </script> 

यदि आप बस की सामग्री प्राप्त करना चाहते हैं :before , यह किया जा सकता है:

 <button id="getContent">Get Content</button> <script> $('#getContent').click(function(){ console.log($('#something').css('content'));//will print '1st' }); </script> 

अंततः यदि आप गतिशील रूप से बदलना चाहते हैं :before jQuery :before सामग्री से :before , आप इसे निम्नानुसार प्राप्त कर सकते हैं:

 <button id="changeBefore">Change</button> <script> var newValue = '22';//coming from somewhere var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>'; $('#changeBefore').click(function(){ $('body').append(add); }); </script> 

ऊपर "बदलाव :before " बटन पर क्लिक करने से बदल जाएगा :before सामग्री '22' में जो एक गतिशील मान है

मुझे उम्मीद है यह मदद करेगा

  $('.span').attr('data-txt', 'foo'); $('.span').click(function () { $(this).attr('data-txt',"any other text"); }) 
 .span{ } .span:after{ content: attr(data-txt); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='span'></div> 

आप इस उद्देश्य के लिए अपने प्लगइन का उपयोग कर सकते हैं।

JQuery:

 (function() { $.pseudoElements = { length: 0 }; var setPseudoElement = function(parameters) { if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) { for (var element of parameters.elements.get()) { if (!element.pseudoElements) element.pseudoElements = { styleSheet: null, before: { index: null, properties: null }, after: { index: null, properties: null }, id: null }; var selector = (function() { if (element.pseudoElements.id !== null) { if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id); return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement; } else { var id = $.pseudoElements.length; $.pseudoElements.length++ element.pseudoElements.id = id; element.setAttribute('data-pe--id', id); return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement; }; })(); if (!element.pseudoElements.styleSheet) { if (document.styleSheets[0]) { element.pseudoElements.styleSheet = document.styleSheets[0]; } else { var styleSheet = document.createElement('style'); document.head.appendChild(styleSheet); element.pseudoElements.styleSheet = styleSheet.sheet; }; }; if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) { element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index); }; if (typeof parameters.argument === 'object') { parameters.argument = $.extend({}, parameters.argument); if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) { var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements[parameters.pseudoElement].index = newIndex; element.pseudoElements[parameters.pseudoElement].properties = parameters.argument; }; var properties = ''; for (var property in parameters.argument) { if (typeof parameters.argument[property] === 'function') element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property](); else element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]; }; for (var property in element.pseudoElements[parameters.pseudoElement].properties) { properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; '; }; element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index); } else if (parameters.argument !== undefined && parameters.property !== undefined) { if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) { var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements[parameters.pseudoElement].index = newIndex; element.pseudoElements[parameters.pseudoElement].properties = {}; }; if (typeof parameters.property === 'function') element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property(); else element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property; var properties = ''; for (var property in element.pseudoElements[parameters.pseudoElement].properties) { properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; '; }; element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index); }; }; return $(parameters.elements); } else if (parameters.argument !== undefined && parameters.property === undefined) { var element = $(parameters.elements).get(0); var windowStyle = window.getComputedStyle( element, '::' + parameters.pseudoElement ).getPropertyValue(parameters.argument); if (element.pseudoElements) { return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle; } else { return windowStyle || null; }; } else { console.error('Invalid values!'); return false; }; }; $.fn.cssBefore = function(argument, property) { return setPseudoElement({ elements: this, pseudoElement: 'before', argument: argument, property: property }); }; $.fn.cssAfter = function(argument, property) { return setPseudoElement({ elements: this, pseudoElement: 'after', argument: argument, property: property }); }; })(); $(function() { $('.element').cssBefore('content', '"New before!"'); }); 
 .element { width: 480px; margin: 0 auto; border: 2px solid red; } .element::before { content: 'Old before!'; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="element"></div> 

किसी और ने एक पूर्ण शैली तत्व के साथ सिर तत्व को जोड़ने पर टिप्पणी की और यदि आप केवल एक बार यह कर रहे हैं तो यह बुरा नहीं है, लेकिन अगर आपको इसे एक से अधिक बार रीसेट करने की आवश्यकता होती है तो आप एक टन शैली तत्वों के साथ समाप्त हो जाएंगे इसलिए रोकने के लिए कि मैंने आईडी के साथ सिर में एक खाली शैली तत्व बना लिया और इसके अंदरूनी HTML को इस तरह बदल दिया:

 <style id="pseudo"></style> 

तो जावास्क्रिप्ट इस तरह दिखेगा:

 var pseudo = document.getElementById("pseudo"); function setHeight() { let height = document.getElementById("container").clientHeight; pseudo.innerHTML = `.class:before { height: ${height}px; }` } setHeight() 

अब मेरे मामले में मुझे दूसरे की ऊंचाई के आधार पर पहले तत्व की ऊंचाई निर्धारित करने के लिए यह आवश्यक था और यह आकार बदलकर बदल देगा, ताकि मैं setHeight() हर बार खिड़की का आकार बदल setHeight() और यह <style> अच्छी तरह।

आशा है कि किसी को भी एक ही बात करने की कोशिश कर अटक गया था, जो मदद करता है