Establecer múltiples atributos para un elemento a la vez con JavaScript

¿Cómo puedo configurar varios atributos a la vez con JavaScript? Desafortunadamente, no puedo usar un marco como jQuery en este proyecto. Esto es lo que tengo ahora:

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

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

Podrías hacer una función de ayuda:

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

Llámalo así:

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

Es posible que pueda utilizar Object.assign(...)para aplicar sus propiedades al elemento creado. Consulte los comentarios para obtener detalles adicionales.

Tenga en cuenta que los atributos heighty widthse definen en píxeles , no en porcentajes. Tendrás que usar CSS para hacerlo fluido.

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 }

Si desea una sintaxis framework-esq ( Nota: solo soporte IE 8+), puede extender el Elementprototipo y agregar su propia setAttributesfunción:

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

Esto le permite usar una sintaxis como esta:

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

Pruébelo: http://jsfiddle.net/ywrXX/1/

Si no le gusta extender un objeto host ( algunos se oponen ) o necesita ser compatible con IE7, simplemente utilícelo como una función

Tenga en cuenta que setAttributeno funcionará styleen IE ni en los controladores de eventos (de todos modos, no debería hacerlo). El código anterior maneja style, pero no eventos.

Documentación

• Prototipos de objetos en MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributeen MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Puede crear una función que tome un número variable de argumentos:

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

O pasa los pares de atributo / valor en un objeto:

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

También puede crear su propio método / contenedor de objetos encadenables:

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

Ejemplo de trabajo: http://jsfiddle.net/jfriend00/qncEz/

Puede codificar una función auxiliar de ES5.1:

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

Llámalo así:

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

const setAttributes = (el, attrs) =>
  Object.entries(attrs)
    .forEach(args =>
      el.setAttribute(...args))

O cree una función que cree un elemento que incluya atributos de parámetros

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');

FYI: height/width='100%'no funcionaría usando atributos. Para una altura / ancho del 100% necesitas los elementosstyle.height/style.width

Prueba esto

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: AQUÍ

use esta función para crear y establecer atributos al mismo tiempo

function createNode(node, attributes){
    const el = document.createElement(node);
    for(let key in attributes){
        el.setAttribute(key, attributes[key]);
    }
    return el;
}

úsalo así

const input = createNode('input', {
    name: 'test',
    type: 'text',
    placeholder: 'Test'
});
document.body.appendChild(input);

Supongo que es la mejor manera de establecer atributos a la vez para cualquier elemento de esta clase.

function SetAtt(elements, attributes) {
    for (var element = 0; element < elements.length; element++) {
        for (var attribute = 0; attribute < attributes.length; attribute += 2) {
            elements[element].setAttribute(attributes[attribute], attributes[attribute + 1]);
        }
    }
}
var Class = document.getElementsByClassName("ClassName"); // class array list
var Data = ['att1', 'val1', 'att2', 'val2', 'att3', 'val3']; //attributes array list
SetAtt(Class, Data);

simplemente puede agregar un método (setAttributes, con "s" al final) al prototipo de "Elemento" como:

Element.prototype.setAttributes = function(obj){
  for(var prop in obj) {
    this.setAttribute(prop, obj[prop])
  }
}

puedes definirlo en una línea:

Element.prototype.setAttributes = function(obj){ for(var prop in obj) this.setAttribute(prop, obj[prop]) }

y puede llamarlo normalmente como llama a los otros métodos. Los atributos se dan como un objeto:

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

puede agregar una instrucción if para generar un error si el argumento dado no es un objeto.