Одновременная установка нескольких атрибутов для элемента с помощью 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%"
});

Вы также можете создать свою собственную обертку / метод цепного объекта:

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

К вашему сведению: 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;
}

ДЕМО: ЗДЕСЬ

используйте эту функцию для одновременного создания и установки атрибутов

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

вы можете просто добавить метод (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, чтобы выдать ошибку, если данный аргумент не является объектом.