การตั้งค่าแอตทริบิวต์หลายรายการสำหรับองค์ประกอบพร้อมกันด้วย JavaScript

ฉันจะตั้งค่าหลายแอตทริบิวต์พร้อมกันด้วย JavaScript ได้อย่างไร? ขออภัยฉันไม่สามารถใช้เฟรมเวิร์กเช่น jQuery ในโปรเจ็กต์นี้ได้ นี่คือสิ่งที่ฉันมีตอนนี้:

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

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

คุณสามารถสร้างฟังก์ชันตัวช่วย:

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

เรียกแบบนี้ว่า

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

คุณอาจสามารถใช้ Object.assign(...)เพื่อใช้คุณสมบัติของคุณกับองค์ประกอบที่สร้างขึ้น ดูความคิดเห็นสำหรับรายละเอียดเพิ่มเติม

โปรดทราบว่าheightและwidthแอตทริบิวต์ถูกกำหนดเป็นพิกเซลไม่ใช่เปอร์เซ็นต์ คุณจะต้องใช้ CSS เพื่อทำให้ลื่นไหล

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 }

หากคุณต้องการไวยากรณ์ framework-esq ( หมายเหตุ:รองรับ IE 8+ เท่านั้น) คุณสามารถขยายElementต้นแบบและเพิ่ม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]);
        }
    }
};

สิ่งนี้ช่วยให้คุณใช้ไวยากรณ์ดังนี้:

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

ลองใช้: http://jsfiddle.net/ywrXX/1/

หากคุณไม่ชอบการขยายโฮสต์อ็อบเจ็กต์ ( บางตัวไม่เห็นด้วย ) หรือต้องการรองรับ IE7- เพียงแค่ใช้เป็นฟังก์ชัน

โปรดทราบว่าsetAttributeจะใช้ไม่ได้กับstyleใน IE หรือตัวจัดการเหตุการณ์ (คุณไม่ควรอยู่แล้ว) รหัสด้านบนจัดการstyleแต่ไม่ใช่เหตุการณ์

เอกสารประกอบ

• ต้นแบบวัตถุบน MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributeบน MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

คุณสามารถสร้างฟังก์ชันที่รับอาร์กิวเมนต์จำนวนตัวแปร:

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

หรือคุณส่งคู่แอตทริบิวต์ / ค่าในวัตถุ:

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

คุณยังสามารถสร้าง / วิธีการห่ออ็อบเจ็กต์ 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%");

ตัวอย่างการทำงาน: http://jsfiddle.net/jfriend00/qncEz/

คุณสามารถเขียนโค้ดฟังก์ชันตัวช่วย ES5.1:

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

เรียกแบบนี้ว่า

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

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

หรือสร้างฟังก์ชันที่สร้างองค์ประกอบรวมถึงแอตทริบิวต์จากพารามิเตอร์

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%'จะไม่ทำงานโดยใช้แอตทริบิวต์ สำหรับความสูง / ความกว้าง 100% คุณต้องมีองค์ประกอบstyle.height/style.width

ลองทำตามนี้

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

สาธิต: ที่นี่

คุณสามารถเพิ่มเมธอด (setAttributes โดยมี "s" ต่อท้าย) ไปยังต้นแบบ "Element" เช่น:

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

คุณสามารถกำหนดได้ในบรรทัดเดียว:

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

และคุณสามารถเรียกมันได้ตามปกติเมื่อคุณเรียกวิธีอื่น ๆ แอตทริบิวต์ถูกกำหนดให้เป็นวัตถุ:

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

คุณสามารถเพิ่มคำสั่ง if เพื่อโยนข้อผิดพลาดหากอาร์กิวเมนต์ที่กำหนดไม่ใช่วัตถุ

ใช้ฟังก์ชันนี้เพื่อสร้างและตั้งค่าแอตทริบิวต์ในเวลาเดียวกัน

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

ใช้แบบนั้น

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

ฉันเดาว่าเป็นวิธีที่ดีที่สุดในการตั้งค่าคุณลักษณะพร้อมกันสำหรับองค์ประกอบใด ๆ ในคลาสนี้

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