Définition de plusieurs attributs pour un élément à la fois avec JavaScript

Question

Comment puis-je définir plusieurs attributs à la fois avec JavaScript ? Malheureusement, je ne suis pas en mesure d'utiliser un framework comme jQuery sur ce projet. Voici ce que j'ai maintenant :

var elem = document.createElement("img");

elem.setAttribute("src", "http://example.com/something.jpeg");
elem.setAttribute("height", "100%");
elem.setAttribute("width", "100%");

Answer 1

Vous pourriez créer une fonction d'aide :

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

Appelez ça comme ça :

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});

Answer 2

Vous pourriez utiliser Object.assign(...) pour appliquer vos propriétés à l'élément créé. Bien que certaines "propriétés (elem.height etc.) soient en lecture seule, c'est-à-dire des accesseurs avec seulement un getter (setter non défini)".

Gardez à l'esprit que height y width Les attributs sont défini en pixels et non des pourcentages. Vous devrez utiliser les CSS pour le rendre fluide.

var elem = document.createElement('img')
Object.assign(elem, {
  className: 'my-image-class',
  src: 'https://dummyimage.com/320x240/ccc/fff.jpg',
  height: 120, // pixels
  width: 160, // pixels
  onclick: function () {
    alert('Clicked!')
  }
})
document.body.appendChild(elem)

// One-liner:
// document.body.appendChild(Object.assign(document.createElement(...), {...}))

.my-image-class {
  height: 100%;
  width: 100%;
  border: solid 5px transparent;
  box-sizing: border-box
}

.my-image-class:hover {
  cursor: pointer;
  border-color: red
}

body { margin:0 }

Answer 3

Si vous vouliez une syntaxe de type "framework-esq" ( Note : (prise en charge d'IE 8+ uniquement), vous pourriez étendre la fonction Element et ajoutez votre propre setAttributes fonction :

Element.prototype.setAttributes = function (attrs) {
    for (var idx in attrs) {
        if ((idx === 'styles' || idx === 'style') && typeof attrs[idx] === 'object') {
            for (var prop in attrs[idx]){this.style[prop] = attrs[idx][prop];}
        } else if (idx === 'html') {
            this.innerHTML = attrs[idx];
        } else {
            this.setAttribute(idx, attrs[idx]);
        }
    }
};

Cela vous permet d'utiliser une syntaxe comme celle-ci :

var d = document.createElement('div');
d.setAttributes({
    'id':'my_div',
    'class':'my_class',
    'styles':{
        'backgroundColor':'blue',
        'color':'red'
    },
    'html':'lol'
});

Essayez-le : http://jsfiddle.net/ywrXX/1/

Si vous n'aimez pas étendre un objet hôte ( certains sont opposés ) ou si vous avez besoin de supporter IE7-, utilisez-le simplement comme une fonction

Notez que setAttribute ne fonctionnera pas pour style dans IE, ou les gestionnaires d'événements (vous ne devriez pas de toute façon). Le code ci-dessus gère style mais pas les événements.

Documentation

• Prototypes d'objets sur MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttribute sur MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Answer 4

Vous pourriez coder une fonction d'aide ES5.1 :

function setAttributes(el, attrs) {
    Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
}

Appelez ça comme ça :

setAttributes(elem, { src: 'http://example.com/something.jpeg', height: '100%' });

Answer 5

Vous pouvez créer une fonction qui prend un nombre variable d'arguments :

function setAttributes(elem /* attribute, value pairs go here */) {
    for (var i = 1; i < arguments.length; i+=2) {
        elem.setAttribute(arguments[i], arguments[i+1]);
    }
}

setAttributes(elem, 
    "src", "http://example.com/something.jpeg",
    "height", "100%",
    "width", "100%");

Ou bien, vous passez les paires attribut/valeur dans un objet :

 function setAttributes(elem, obj) {
     for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
             elem[prop] = obj[prop];
         }
     }
 }

setAttributes(elem, {
    src: "http://example.com/something.jpeg",
    height: "100%",
    width: "100%"
});

---

Vous pouvez également créer votre propre enveloppe/méthode d'objet chaînable :

function $$(elem) {
    return(new $$.init(elem));
}

$$.init = function(elem) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }
    this.elem = elem;
}

$$.init.prototype = {
    set: function(prop, value) {
        this.elem[prop] = value;
        return(this);
    }
};

$$(elem).set("src", "http://example.com/something.jpeg").set("height", "100%").set("width", "100%");

Exemple de travail : http://jsfiddle.net/jfriend00/qncEz/