AddClass Funktion | CSS-Tricks

Wenn Sie keine Bibliothek verwenden, müssen Sie möglicherweise eine eigene Funktion wie diese erstellen.

function addClass(id,new_class){
       var i,n=0;

       new_class=new_class.split(",");

       for(i=0;i<new_class.length;i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
       }

       return n;
}

Verwendung

<div id="changeme" class="big red"></div>
<button onclick="addClass('changeme', 'round')">Add a class</button>

Kommentare

Liam Goodacre

# 7. Januar 2012

Moderne Browser verfügen über ein `classList`-Attribut für DOM-Elemente.

element.classList.add('classname');

Es gibt auch eine Korrektur für IE 8+, weitere Informationen hier: developer.mozilla.org/en/DOM/element.classList

Außerdem ist es schlechte Praxis, JavaScript Inline mit HTML-Elementen zu verwenden; die Konvention ist, es über einen Event-Handler anzuhängen.

Dies könnte eine mögliche Alternative sein.

var addClass = function(_element, _classes) {
  var classList, item, _i, _len;
  classList = _element.classList;
  for (_i = 0, _len = classes.length; _i < _len; _i++) {
    item = classes[_i];
    classList.add(item);
  }
  return _element;
};

Antworten

Liam Goodacre

# 7. Januar 2012

Entschuldigung, es gibt einen kleinen Tippfehler in meinem Code.

var addClass = function(_element, _classes) {
  var classList, item, _i, _len;
  classList = _element.classList;
  for (_i = 0, _len = _classes.length; _i < _len; _i++) {
    item = _classes[_i];
    classList.add(item);
  }
  return _element;
};

Außerdem würde dies wie folgt ausgeführt:

addClass(element, ['class1', 'class2']);

# 16. Mai 2014

@Liam: Toller Code! Habe ihn leicht angepasst, indem ich eine Toggle-Funktion hinzugefügt habe. So kann ich Klassen hinzufügen/entfernen. In meinem Fall, um die Geschwister-Elemente in einer Tabelle ein- und auszublenden.

var addClass = function(_element, _classes) {
    var classList, item, _i, _len;
    classList = _element.classList;
    for (_i = 0, _len = _classes.length; _i < _len; _i++) {
        item = _classes[_i];
        if (classList.length <= _len) {
            classList.add(item);
        } else {
            classList.remove(item);
        }
    }
    return _element;
    };

Mathias Bynens

# 8. Januar 2012

Dieses Snippet geht davon aus, dass ein U+0020 Leerzeichen zur Trennung von Klassennamen verwendet wird. Das würde wahrscheinlich in den meisten Situationen funktionieren, aber es ist wichtig zu beachten, dass es mehr als nur ein Leerzeichen in HTML gibt.

Antworten

nonae

# 18. Januar 2012

@an die, denen es nicht gefallen hat

benutzen Sie es einfach nicht. Niemand zwingt Sie dazu.

Ich halte es für ein großartiges Snippet. Die Suche mit „“+wort+”“ ist reine Genialität, das verhindert völlig jede Art von unerwarteten Ergebnissen.

Ich liebe diese Website, ich hätte wirklich nicht gedacht, dass sie mein Snippet veröffentlichen.

Antworten

nonae

Permalink zum Kommentar# 18. Januar 2012

Sie haben nicht erklärt, wofür das „return n;“ gut ist.

es dient nur dazu, zu wissen, wie viele Klassen erfolgreich hinzugefügt wurden. Diese Option war für mich praktisch (und wenn jemand sie wirklich nicht nutzen möchte, dann löschen Sie diese Zeile einfach)

Thabang

# 6. Juni 2014

Leute, was ist, wenn ich diese Klassen automatisch entfernen möchte, wenn ich auf einem anderen Element eine Klasse hinzufüge?

Antworten

mingzhanghui

# 29. März 2018

// hasClass
HTMLElement.prototype.hasClass = function(name) {
    return this.className.match(new RegExp('(\\s|^)'+name+'(\\s|$)'));
};

// addClass
HTMLElement.prototype.addClass = function(new_class) {   
    var nc = new_class.split(",");

    for (var i = 0; i < nc.length; i++) {
        if ((" " + this.className + " ").indexOf(" " + nc[i] + " ") == -1) {
            this.className += " " + nc[i];
        }
    }
    return this;
};
HTMLElement.prototype.removeClass = function(name) {
  if (this.hasClass(name)) {
    var reg = new RegExp('(\\s|^)'+name+'(\\s|$)');
    this.className = this.className.replace(reg,' ');
  }
  return this;
};

Antworten

Verwendung

Kommentare

Antwort hinterlassen Antwort abbrechen