javascript जावास्क्रिप्ट के साथ एक तत्व वर्ग बदलें




html dom (17)

जावास्क्रिप्ट का उपयोग कर onClick ईवेंट के जवाब में मैं HTML तत्व की कक्षा कैसे बदल सकता हूं?

https://code.i-harness.com


IE6 समर्थन के साथ वेनिला जावास्क्रिप्ट में एक तत्व की कक्षा बदलें

पुराने ब्राउज़र के साथ संगतता रखने के लिए आप नोड attributes का उपयोग करने का प्रयास कर सकते हैं I6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>


कक्षाओं को बदलने के लिए आधुनिक एचटीएमएल 5 तकनीकें

आधुनिक ब्राउज़रों ने classList जोड़ा है जो लाइब्रेरी की आवश्यकता के बिना कक्षाओं में हेरफेर करना आसान बनाता है:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

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

सरल क्रॉस ब्राउज़र समाधान

तत्व का चयन करने के लिए मानक जावास्क्रिप्ट तरीका document.getElementById("Id") का उपयोग कर रहा है, जो निम्न उदाहरणों का उपयोग करता है - आप निश्चित रूप से अन्य तरीकों से तत्व प्राप्त कर सकते हैं, और सही स्थिति में इसके बजाय इसका उपयोग कर सकते हैं - हालांकि, इस पर विस्तार से जवाब के दायरे से बाहर है।

तत्व के लिए सभी वर्गों को बदलने के लिए:

सभी मौजूदा वर्गों को एक या एक से अधिक नए वर्गों से प्रतिस्थापित करने के लिए, श्रेणी नाम विशेषता सेट करें:

document.getElementById("MyElement").className = "MyClass";

(आप कई कक्षाओं को लागू करने के लिए एक स्पेस-सीमांकित सूची का उपयोग कर सकते हैं।)

किसी तत्व को अतिरिक्त श्रेणी जोड़ने के लिए:

किसी तत्व को कक्षा जोड़ने के लिए, मौजूदा मानों को हटाने / प्रभावित किए बिना, एक स्पेस और नया क्लासनाम संलग्न करें, जैसे:

document.getElementById("MyElement").className += " MyClass";

किसी तत्व से कक्षा को निकालने के लिए:

किसी भी वर्ग को किसी तत्व को हटाने के लिए, अन्य संभावित वर्गों को प्रभावित किए बिना, एक साधारण रेगेक्स प्रतिस्थापन आवश्यक है:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

इस रेगेक्स का एक स्पष्टीकरण निम्नानुसार है:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

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

यह जांचने के लिए कि किसी तत्व को पहले से ही तत्व पर लागू किया गया है या नहीं:

एक वर्ग को हटाने के लिए ऊपर इस्तेमाल किया गया वही रेगेक्स भी एक चेक के रूप में उपयोग किया जा सकता है कि कोई विशेष वर्ग मौजूद है या नहीं:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


घटनाओं पर क्लिक करने के लिए इन कार्यों को असाइन करना:

जबकि HTML ईवेंट विशेषताओं (जैसे onclick="this.className+=' MyClass'" अंदर सीधे जावास्क्रिप्ट लिखना संभव है) यह अनुशंसित व्यवहार नहीं है। विशेष रूप से बड़े अनुप्रयोगों पर, जावास्क्रिप्ट इंटरैक्शन तर्क से HTML मार्कअप को अलग करके अधिक रखरखाव कोड प्राप्त किया जाता है।

इसे प्राप्त करने का पहला चरण एक फ़ंक्शन बनाकर, और ऑनक्लिक विशेषता में फ़ंक्शन को कॉल करना है, उदाहरण के लिए:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(इस कोड को स्क्रिप्ट टैग में रखना आवश्यक नहीं है, यह केवल उदाहरण की संक्षिप्तता के लिए है, और एक अलग फ़ाइल में जावास्क्रिप्ट सहित अधिक उपयुक्त हो सकता है।)

दूसरा चरण HTML पर और जावास्क्रिप्ट में ऑनक्लिक ईवेंट को स्थानांतरित करना है, उदाहरण के लिए addEventListener का उपयोग करना

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(ध्यान दें कि window.onload भाग आवश्यक है ताकि HTML के लोड होने के बाद उस फ़ंक्शन की सामग्री निष्पादित की जा सके - इसके बिना, जावास्क्रिप्ट कोड कहलाए जाने पर MyElement मौजूद नहीं हो सकता है, ताकि लाइन विफल हो जाए।)


जावास्क्रिप्ट फ्रेमवर्क और पुस्तकालय

उपर्युक्त कोड मानक जावास्क्रिप्ट में है, हालांकि सामान्य कार्यों को सरल बनाने के लिए ढांचे या लाइब्रेरी का उपयोग करना आम बात है, साथ ही निश्चित बग और किनारे के मामलों से लाभ जो आप अपना कोड लिखते समय नहीं सोच सकते हैं।

जबकि कुछ लोग इसे कक्षा बदलने के लिए ~ 50 केबी ढांचे को जोड़ने के लिए अधिक मात्रा में विचार करते हैं, यदि आप जावास्क्रिप्ट काम की पर्याप्त मात्रा में काम कर रहे हैं, या असामान्य क्रॉस-ब्राउज़र व्यवहार वाले किसी भी चीज को देखते हुए, यह विचार करने योग्य है।

(बहुत मोटे तौर पर, लाइब्रेरी एक विशिष्ट कार्य के लिए डिज़ाइन किए गए टूल का एक सेट है, जबकि एक ढांचे में आमतौर पर एकाधिक पुस्तकालय होते हैं और कर्तव्यों का पूरा सेट करते हैं।)

ऊपर दिए गए उदाहरणों को jQuery का उपयोग करके नीचे पुन: उत्पन्न किया गया है, शायद सबसे अधिक उपयोग की जाने वाली जावास्क्रिप्ट लाइब्रेरी (हालांकि अन्य लोग भी जांच के लायक हैं)।

(ध्यान दें कि $ यहां jQuery ऑब्जेक्ट है।)

JQuery के साथ बदलती कक्षाएं:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

इसके अलावा, jQuery एक वर्ग जोड़ने के लिए शॉर्टकट प्रदान करता है अगर यह लागू नहीं होता है, या उस वर्ग को हटा देता है जो करता है:

$('#MyElement').toggleClass('MyClass');


JQuery के साथ एक क्लिक ईवेंट में फ़ंक्शन असाइन करना:

$('#MyElement').click(changeClass);

या, आईडी की आवश्यकता के बिना:

$(':button:contains(My Button)').click(changeClass);



JQuery जैसी लाइब्रेरी के साथ यह सबसे आसान है:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

आप node.className उपयोग इस node.className कर सकते हैं:

document.getElementById('foo').className = 'bar';

यह पीपीके के अनुसार आईई 5.5 और ऊपर काम करना चाहिए।


ऐसा करने के लिए यहां सरल jQuery कोड है।

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

यहाँ,

  • कक्षा 1 एक घटना के लिए श्रोता है।
  • अभिभावक वर्ग वह वर्ग है जो उस वर्ग को होस्ट करता है जिसे आप बदलना चाहते हैं
  • Classtoremove आपके पास पुरानी कक्षा है।
  • कक्षा जोड़ने के लिए वह नई कक्षा है जिसे आप जोड़ना चाहते हैं।
  • 100 टाइमआउट देरी है जिसके दौरान कक्षा बदल दी गई है।

शुभ लाभ।


किसी तत्व पर कक्षा को टॉगल / जोड़ने / निकालने के लिए यहां एक टॉगल क्लास है:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

jsfiddle देखें

गतिशील रूप से एक नई कक्षा बनाने के लिए here मेरा उत्तर भी देखें


ठीक है, मुझे लगता है कि इस मामले में आपको jQuery का उपयोग करना चाहिए या शुद्ध जावास्क्रिप्ट में अपने तरीके लिखना चाहिए, मेरी प्राथमिकता मेरे आवेदन के लिए सभी jQuery को इंजेक्शन देने के बजाय अपनी खुद की विधियों को जोड़ रही है यदि मुझे अन्य कारणों से इसकी आवश्यकता नहीं है।

मैं अपने जावास्क्रिप्ट ढांचे के तरीकों के रूप में नीचे कुछ ऐसा करना चाहता हूं जो कुछ कार्यक्षमताओं को जोड़ने के लिए जो कक्षाओं को जोड़ने, कक्षाओं को हटाने, आदि के समान हैं, यह IE9 + में पूरी तरह से समर्थित है, मेरा कोड ES6 में लिखा गया है, इसलिए आपको आवश्यकता है यह सुनिश्चित करने के लिए कि आपका ब्राउज़र इसका समर्थन करता है या आप बैबेल जैसे कुछ का उपयोग करते हैं, अन्यथा आपके कोड में ईएस 5 सिंटैक्स का उपयोग करने की आवश्यकता है, इस तरह, हम आईडी के माध्यम से तत्व ढूंढते हैं, जिसका अर्थ है कि तत्व को आईडी चुनने की आवश्यकता है:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

और आप बस उन्हें नीचे के रूप में उपयोग कर सकते हैं, कल्पना करें कि आपके तत्व में 'आईडी' और 'कक्षा' की कक्षा है, सुनिश्चित करें कि आप उन्हें एक स्ट्रिंग के रूप में पास करते हैं, आप नीचे उपयोग का उपयोग कर सकते हैं:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

पिछले regexes पर कुछ मामूली नोट्स और tweaks:

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

यह रेगेक्स मामला असंवेदनशील है ताकि क्लास नामों में किसी भी ब्राउज़र पर कोड का उपयोग करने से पहले कक्षा के नामों में बग दिखाई दे सकें जो क्लास नामों में मामले की परवाह नहीं करता है।

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

बस एक और लोकप्रिय ढांचे, Google क्लोजर से जानकारी जोड़ने के लिए, अपने dom/classes वर्ग देखें:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

तत्व चुनने का एक विकल्प CSS3 चयनकर्ता के साथ goog.dom.query का उपयोग कर रहा है:

var myElement = goog.dom.query("#MyElement")[0];

बस सोचा कि मैं इसे फेंक दूंगा:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

मेरी पुरानी परियोजनाओं में से एक जिसने jQuery का उपयोग नहीं किया, मैंने तत्व को कक्षा में जोड़ने, हटाने और जांचने के लिए निम्न कार्य किए:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

तो, उदाहरण के लिए, यदि मैं कुछ वर्ग को बटन जोड़ने के लिए क्लिक करना चाहता हूं तो मैं इसका उपयोग कर सकता हूं:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

अब तक सुनिश्चित करें कि यह jQuery का उपयोग करना बेहतर होगा।


मैं jQuery का उपयोग करता हूं और इस तरह कुछ लिखता हूं:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

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

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

धन्यवाद


यह मेरे लिए काम कर रहा है:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

रेखा

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

होना चाहिए:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

वाह, हैरान है कि यहां इतने सारे ओवरकिल उत्तर हैं ...

<div class="firstClass" onclick="this.className='secondClass'">

शुद्ध जावास्क्रिप्ट कोड का उपयोग करना:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

ASP.NET में जावास्क्रिप्ट के साथ एक तत्व का सीएसएस क्लास बदलें:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub





dom