Festlegen mehrerer Attribute für ein Element gleichzeitig mit JavaScript

Wie kann ich mit JavaScript mehrere Attribute gleichzeitig festlegen? Leider kann ich für dieses Projekt kein Framework wie jQuery verwenden. Folgendes habe ich jetzt:

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

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

Sie könnten eine Hilfsfunktion erstellen:

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

Nennen Sie es so:

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

Möglicherweise können Sie Object.assign(...)Ihre Eigenschaften auf das erstellte Element anwenden. Weitere Details finden Sie in den Kommentaren.

Beachten Sie, dass heightund widthAttribute in Pixel und nicht in Prozent definiert sind. Sie müssen CSS verwenden, um es flüssig zu machen.

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 }

Wenn Sie eine Framework-esq-Syntax wünschen ( Hinweis: Nur IE 8+ -Unterstützung), können Sie den ElementPrototyp erweitern und Ihre eigene setAttributesFunktion hinzufügen :

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

Auf diese Weise können Sie die folgende Syntax verwenden:

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

Probieren Sie es aus: http://jsfiddle.net/ywrXX/1/

Wenn Sie ein Host-Objekt nicht gerne erweitern ( einige sind dagegen ) oder IE7- unterstützen müssen, verwenden Sie es einfach als Funktion

Beachten Sie, dass dies in IE oder Ereignishandlern setAttributenicht funktioniert style(sollten Sie sowieso nicht). Der obige Code behandelt styleEreignisse, jedoch keine Ereignisse.

Dokumentation

• Objektprototypen auf MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributeauf MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Sie können eine Funktion erstellen, die eine variable Anzahl von Argumenten akzeptiert:

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

Oder Sie übergeben die Attribut / Wert-Paare an ein Objekt:

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

Sie können auch Ihren eigenen verkettbaren Objekt-Wrapper / Ihre eigene Methode erstellen:

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

Arbeitsbeispiel: http://jsfiddle.net/jfriend00/qncEz/

Sie können eine ES5.1-Hilfsfunktion codieren:

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

Nennen Sie es so:

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

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

Oder erstellen Sie eine Funktion, die ein Element mit Attributen aus Parametern erstellt

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

Zu Ihrer Information: height/width='100%'würde nicht mit Attributen funktionieren. Für eine Höhe / Breite von 100% benötigen Sie die Elementestyle.height/style.width

Versuche dies

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

Verwenden Sie diese Funktion, um Attribute gleichzeitig zu erstellen und festzulegen

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

benutze es so

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

Ich denke, es ist die beste Möglichkeit, Attribute für jedes Element in dieser Klasse gleichzeitig festzulegen.

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

Sie können dem Prototyp "Element" einfach eine Methode (setAttributes, mit "s" am Ende) hinzufügen, wie:

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

Sie können es in einer Zeile definieren:

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

und Sie können es normal aufrufen, wie Sie die anderen Methoden aufrufen. Die Attribute werden als Objekt angegeben:

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

Sie können eine if-Anweisung hinzufügen, um einen Fehler auszulösen, wenn das angegebene Argument kein Objekt ist.