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 adesso:

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

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

Potresti creare una funzione di supporto:

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

Potresti essere in grado di utilizzare Object.assign(...)per applicare le tue proprietà all'elemento creato. Vedere i commenti per ulteriori dettagli.

Tieni presente che heighte gli widthattributi sono definiti in pixel , non in percentuale. Dovrai usare CSS per renderlo 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 }

Se si desidera una sintassi basata su framework ( Nota: solo supporto IE 8+), è possibile estendere il Elementprototipo e aggiungere la propria setAttributesfunzione:

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

Ciò ti consente di utilizzare la sintassi 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 oggetto host ( alcuni sono opposti ) o hai bisogno di supportare IE7-, usalo come funzione

Nota che setAttributenon funzionerà per styleIE o per i gestori di eventi (non dovresti comunque). Il codice sopra gestisce style, ma non gli eventi.

Documentazione

• Prototipi di oggetti su MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributesu MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

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, trasferisci le coppie attributo / valore su un oggetto:

 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 di oggetti concatenabili:

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 funzionante: http://jsfiddle.net/jfriend00/qncEz/

Puoi codificare una funzione di supporto 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%' });

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

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

FYI: height/width='100%'non funzionerebbe utilizzando gli attributi. Per un'altezza / larghezza del 100% sono necessari gli elementistyle.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

puoi semplicemente aggiungere un metodo (setAttributes, con "s" alla fine) al prototipo "Element" come:

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

puoi definirlo in una riga:

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

e puoi chiamarlo normalmente come chiami gli altri metodi. Gli attributi sono dati come oggetto:

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

puoi aggiungere un'istruzione if per generare un errore se l'argomento dato non è un oggetto.

utilizzare questa funzione per creare e impostare attributi allo stesso tempo

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

usalo così

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

Immagino che sia il modo migliore per impostare gli attributi contemporaneamente per qualsiasi elemento in questa classe.

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