Menyetel beberapa atribut untuk satu elemen sekaligus dengan JavaScript

Bagaimana cara mengatur beberapa atribut sekaligus dengan JavaScript? Sayangnya, saya tidak dapat menggunakan kerangka kerja seperti jQuery pada proyek ini. Inilah yang saya miliki sekarang:

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

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

Anda bisa membuat fungsi pembantu:

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

Sebut saja seperti ini:

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

Anda mungkin dapat menggunakan Object.assign(...)untuk menerapkan properti Anda ke elemen yang dibuat. Lihat komentar untuk detail tambahan.

Perlu diingat bahwa atribut heightdan ditentukan dalam piksel , bukan persen. Anda harus menggunakan CSS untuk membuatnya berubah-ubah.width

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 }

Jika Anda menginginkan sintaks framework-esq ( Catatan: hanya dukungan IE 8+), Anda dapat memperluas Elementprototipe dan menambahkan setAttributesfungsi Anda sendiri :

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

Ini memungkinkan Anda menggunakan sintaks seperti ini:

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

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

Jika Anda tidak suka memperluas objek host ( ada yang menentang ) atau perlu mendukung IE7-, gunakan saja sebagai fungsi

Perhatikan bahwa setAttributeitu tidak akan berfungsi styledi IE, atau penangan acara (Anda tidak seharusnya melakukannya). Kode di atas menangani style, tetapi bukan peristiwa.

Dokumentasi

• Prototipe objek di MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributedi MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Anda dapat membuat fungsi yang menggunakan sejumlah variabel argumen:

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

Atau, Anda meneruskan pasangan atribut / nilai pada sebuah objek:

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

Anda juga bisa membuat pembungkus / metode objek yang dapat dirantai sendiri:

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

Contoh kerja: http://jsfiddle.net/jfriend00/qncEz/

Anda dapat membuat kode fungsi pembantu ES5.1:

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

Sebut saja seperti ini:

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

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

Atau buat fungsi yang membuat elemen termasuk atribut dari parameter

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%'tidak akan berfungsi menggunakan atribut. Untuk tinggi / lebar 100% Anda membutuhkan elemenstyle.height/style.width

Coba ini

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: DI SINI

Anda cukup menambahkan metode (setAttributes, dengan "s" di akhir) ke prototipe "Elemen" seperti:

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

Anda dapat menentukannya dalam satu baris:

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

dan Anda dapat memanggilnya seperti biasa saat memanggil metode lain. Atribut diberikan sebagai objek:

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

Anda bisa menambahkan pernyataan if untuk membuat kesalahan jika argumen yang diberikan bukan objek.

gunakan fungsi ini untuk membuat dan menyetel atribut pada saat yang bersamaan

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

gunakan seperti itu

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

Saya kira itu cara terbaik untuk mengatur atribut sekaligus untuk setiap elemen di kelas ini.

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