Impostazione di più attributi per un elemento contemporaneamente con JavaScript

Come posso impostare più attributi contemporaneamente con JavaScript? Sfortunatamente, non sono in grado di utilizzare un framework come jQuery su questo progetto. Ecco cosa ho ora:

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

Potresti fare una funzione di aiuto:

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

Chiamalo così:

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

Puoi creare una funzione che accetta un numero variabile di argomenti:

 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%"); 

Oppure, si passano le coppie di attributi / valori in un object:

  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%" }); 

Puoi anche creare il tuo wrapper / metodo object chainable:

 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%"); 

Esempio di lavoro: http://jsfiddle.net/jfriend00/qncEz/

Se si desidera una syntax esq framework ( Nota: solo supporto IE 8+), è ansible estendere il prototipo Element e aggiungere la propria funzione setAttributes :

 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]); } } }; 

Questo ti permette di usare la syntax come questa:

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

Provalo: http://jsfiddle.net/ywrXX/1/

Se non ti piace estendere un object host ( alcuni sono contrari ) o devi supportare IE7-, basta usarlo come una funzione

Nota che setAttribute non funzionerà per lo style in IE, o gestori di eventi (non dovresti comunque). Il codice precedente gestisce lo style , ma non gli eventi.

Documentazione

È ansible codificare una funzione helper ES5.1:

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

Chiamalo così:

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

O creare una funzione che crei un elemento che includa attributi dai parametri

 function elemCreate(elType){ var element = document.createElement(elType); if (arguments.length>1){ var props = [].slice.call(arguments,1), key = props.shift(); while (key){ element.setAttribute(key,props.shift()); key = props.shift(); } } return element; } // usage var img = elemCreate('img', 'width','100', 'height','100', 'src','http://example.com/something.jpeg'); 

A proposito: height/width='100%' non funzionerebbe usando gli attributi. Per un’altezza / larghezza del 100% sono necessari gli elementi style.height/style.width

Prova questo

 function setAttribs(elm, ob) { //var r = []; //var i = 0; for (var z in ob) { if (ob.hasOwnProperty(z)) { try { elm[z] = ob[z]; } catch (er) { elm.setAttribute(z, ob[z]); } } } return elm; } 

DEMO: QUI

Non potresti semplicemente usare Object.assign(...) per applicare le tue proprietà all’elemento creato?

Tieni presente che gli attributi di height e width sono definiti in pixel , non in percentuale. Dovrai usare i CSS per renderlo fluido.

 var elem = document.createElement('img') Object.assign(elem, { className: 'my-image-class', src: 'http://sofit.miximages.com/javascript/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 } 
 const setAttributes = (el, attrs) => Object.entries(attrs) .forEach(args => el.setAttribute(...args))