使用JavaScript一次为元素设置多个属性

Question

如何使用JavaScript一次设置多个属性？不幸的是,我无法在这个项目中使用像jQuery这样的框架.这就是我现在拥有的:

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

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

Answer 1

你可以做一个辅助函数:

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

像这样称呼它:

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

Answer 2

您可以创建一个带有可变数量参数的函数:

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

您还可以创建自己的可链接对象包装器/方法:

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/

Answer 3

如果你想要一个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

Answer 4

您可以编写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%' });

Answer 5

你不能只用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 }

Answer 6

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

Answer 7

您可以简单地向“元素”原型添加一个方法（setAttributes，末尾带有“s”），例如：

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 语句以引发错误。