JavaScript personnalisé addClass méthode

Actuellement en JavaScript, afin d'ajouter une classe à un élément que j'utilise:

var element = document.getElementById("element");

var classes;
if (element.className.split(" ").indexOf("class") < 0) {
    classes = element.className.split(" ");
    classes.push("class");
    element.className = classes.join(" ");
}

Si je voulais faire que le code de la méthode jQuery addClass() comme ci-dessous:

addClass: function(string) {
    var classes;
    if (element.className.split(" ").indexOf("class") < 0) {
        classes = element.className.split(" ");
        classes.push("class");
        element.className = classes.join(" ");
    }
}

Dans lequel prototype de l'objet dois-je ajouter que cette méthode fonctionne comme ceci:

document.getElementById("element").onclick = function() {
    this.addClass("class");
}
Étendre les builtins des prototypes non standard fonctions peuvent rendre le code source de confusion. Je vous suggérons d'utiliser un classList polyfill ou faire addClass sa propre fonction qui prend l'élément comme un argument à la place.
this.classList.add("class")
Pourquoi l'ajout d'une fonction utile comme méthode de rendre le code source de confusion @RyanO Hara?
Une future version de DOM pourrait définir un natif addClass qui se comporte différemment que la vôtre. Il pourrait même avoir un setter, et lorsque vous essayez de définir votre méthode, quelque chose d'inattendu peut se produire. Ne jamais modifier un objet qui ne vous appartient pas.

OriginalL'auteur Angel Politis | 2016-07-09

  1. 4

    Je crois que vous l'ajouter à la Element objet prototype

    Element.prototype.addClass = function(className){
    //something
}
    merci, a changé de nom de classe
    Tout à fait exact @realseanp. Je viens de tester et ça fonctionne! Merci beaucoup.
    Éviter de créer des prototypes qui ne vous appartient pas.
    Ce n'est pas une opinion @realseanp... c'est une chose connue programmers.stackexchange.com/questions/104320/.... Juste à cause de vous répondre ce que l'OP a demandé, ne signifie pas qu'il n'est pas une mauvaise pratique.
    La plupart des gens considèrent cette mauvaise pratique. I de considérer cette mauvaise pratique. Mais je suis d'accord avec realseanp que les votes ne sont pas justifiées parce que ce n'est répondre à la question qui a été posée, donc la réponse est à la fois littéralement correcte et utile pour l'OP. Cela dit, il serait un mieux réponse si elle comprenait même une explication d'une phrase à propos de pourquoi c'est une mauvaise pratique, et il pourrait peut-être donner un exemple de tester si la méthode existe déjà sur le prototype plutôt que de aveuglément l'écraser.

    OriginalL'auteur pizza-r0b

  2. 2

    Utilisation Élément .classList.ajouter().

    Nativement, il est disponible dans tous les navigateurs modernes, y compris IE10 et.

    Le lien ci-dessus fournit également un polyfill pour tous les navigateurs non pris en charge.

    Ce doit être la accepté de répondre. Couplé avec un polyfill c'est le plus passé/avenir-friendly option.
    Mais la question est vraiment à propos de l'ajout de classes, ou est-il "Comment puis-je ajouter des méthodes aux éléments du DOM?" avec des classes juste d'être un exemple? (Je sais que l'extension native prototypes est largement considéré comme une mauvaise pratique, et je suis d'accord que c'est - mais cela ne signifie pas qu'il n'y a pas de réponse claire sur la façon de le faire.)
    non, il ne devrait pas. Ma question était claire. Je n'étais pas en train de demander une autre façon d'ajouter une classe, mais dans lequel prototype de l'objet que je dois ajouter une méthode qui ne qui. Cette proposition utile qui n'est pas, cependant, de répondre à la question.
    Compris. Si vous essayez d'apprendre à travailler avec les prototypes en vue de la création d'une bibliothèque similaire à jQuery par des objets, puis j'ai 100% d'accord avec vous. Toutefois, si vous voulez écrire l'avenir JavaScript pour une application de production, document.getElementById("example").onclick = function() { this.classList.add("class"); } est un bien testé alternative!

    OriginalL'auteur zero298