Méthode personnalisée JavaScript

Question

J'ai créé un objet personnalisé et je lui ai ajouté une méthode appelée changeColor avec un attribut. L'idée est que lorsque j'attache cette méthode à un élément DOM, la couleur de tout le contenu de cet élément doit changer.

Voici mon code de départ :

function CustomColor() {

}

CustomColor.prototype.changeColor = function(color){
   //here what I have to specify.

}

C'est assez basique, mais je suis novice en JavaScript. Merci.

Answer 1

Utiliser CustomColor comme ceci :

function CustomColor(element) {
    this.element = element;
}
CustomColor.prototype.changeColor = function (color) {
    this.element.style.color = color;
}

nouvelle instance de CustomColor :

var element = new CustomColor(document.body);
element.changeColor('red');

vous pouvez également étendre l'élément dom actuel sans utiliser de classes supplémentaires comme celle-ci :

Element.prototype.changeColor = function (color) {
    this.style.color = color;
};

et l'utiliser comme ceci :

document.body.changeColor('red')

Answer 2

Je suppose que c'est ce que vous recherchez :

var elem = document.getElementById('some_element'),
    CustomColor = function (element) {
        this.htmlElement = element;
    };
CustomColor.prototype.changeColor = function (color) {
    this.htmlElement.style.color = color;
    return;
};
elem.customColor = new CustomColor(elem);

Utilisation de la propriété attachée :

elem.customColor.changeColor('#00f');

La seule façon d'obtenir une référence à l'élément HTML hôte est de le passer comme argument au constructeur. Cependant, dans changeColor vous ne pouvez pas faire référence à une variable "privée" de CustomColor (y compris ses arguments), d'où la nécessité de créer une propriété "publique" pour toutes les propriétés que vous voulez utiliser dans changeColor . Plus d'informations sur MDN

Une démonstration en direct à jsFiddle .

Le code ci-dessus crée une propriété personnalisée uniquement pour un élément HTML spécifique. Il n'est pas recommandé de créer des propriétés personnalisées pour les éléments HTML. prototype d'un élément DOM, car ils ne sont pas pris en charge par tous les navigateurs.