Đặt nhiều thuộc tính cho một phần tử cùng một lúc bằng JavaScript

Làm cách nào để đặt nhiều thuộc tính cùng một lúc với JavaScript? Rất tiếc, tôi không thể sử dụng một khuôn khổ như jQuery trong dự án này. Đây là những gì tôi có bây giờ:

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

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

Bạn có thể tạo một hàm trợ giúp:

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

Gọi nó như thế này:

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

Bạn có thể sử dụng Object.assign(...)để áp dụng các thuộc tính của mình cho phần tử đã tạo. Xem bình luận để biết thêm chi tiết.

Hãy nhớ rằng heightvà widthcác thuộc tính được xác định bằng pixel , không phải phần trăm. Bạn sẽ phải sử dụng CSS để làm cho nó trở nên linh hoạt.

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 }

Nếu bạn muốn có cú pháp framework-esq ( Lưu ý: chỉ hỗ trợ IE 8+), bạn có thể mở rộng Elementnguyên mẫu và thêm setAttributeschức năng của riêng mình :

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

Điều này cho phép bạn sử dụng cú pháp như sau:

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

Hãy thử nó: http://jsfiddle.net/ywrXX/1/

Nếu bạn không thích mở rộng đối tượng máy chủ ( một số bị phản đối ) hoặc cần hỗ trợ IE7-, chỉ cần sử dụng nó như một hàm

Lưu ý rằng điều đó setAttributesẽ không hoạt động với styleIE hoặc trình xử lý sự kiện (dù sao thì bạn cũng không nên làm như vậy). Đoạn mã trên xử lý style, nhưng không xử lý các sự kiện.

Tài liệu

• Nguyên mẫu đối tượng trên MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributetrên MDN - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Bạn có thể tạo một hàm nhận một số đối số thay đổi:

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

Hoặc, bạn chuyển các cặp thuộc tính / giá trị vào một đối tượng:

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

Bạn cũng có thể tạo phương thức / trình bao bọc đối tượng có thể điều khiển của riêng mình:

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

Ví dụ làm việc: http://jsfiddle.net/jfriend00/qncEz/

Bạn có thể viết mã một hàm trợ giúp ES5.1:

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

Gọi nó như thế này:

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

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

Hoặc tạo một hàm tạo một phần tử bao gồm các thuộc tính từ các tham số

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%'sẽ không hoạt động khi sử dụng các thuộc tính. Để có chiều cao / chiều rộng là 100%, bạn cần các yếu tốstyle.height/style.width

Thử đi

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: TẠI ĐÂY

sử dụng chức năng này để tạo và đặt các thuộc tính cùng một lúc

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

sử dụng nó như vậy

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

Tôi đoán đó là cách tốt nhất để đặt các thuộc tính cùng một lúc cho bất kỳ phần tử nào trong lớp này.

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

bạn có thể chỉ cần thêm một phương thức (setAttributes, với "s" ở cuối) vào nguyên mẫu "Phần tử" như:

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

bạn có thể xác định nó trong một dòng:

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

và bạn có thể gọi nó bình thường như khi bạn gọi các phương thức khác. Các thuộc tính được cung cấp dưới dạng một đối tượng:

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

bạn có thể thêm câu lệnh if để thông báo lỗi nếu đối số đã cho không phải là một đối tượng.