JavaScript ile aynı anda bir öğe için birden çok özellik ayarlama

JavaScript ile aynı anda birden çok özelliği nasıl ayarlayabilirim? Maalesef bu projede jQuery gibi bir çerçeve kullanamıyorum. İşte şimdi sahip olduğum şey:

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

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

Yardımcı bir işlev yapabilirsiniz:

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

Şöyle diyelim:

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

Object.assign(...)Özelliklerinizi oluşturulan öğeye uygulamak için kullanabilirsiniz . Ek ayrıntılar için yorumlara bakın.

Unutmayın heightve widthöznitelikleri piksel olarak tanımlanan değil, yüzdeleri. Akıcı hale getirmek için CSS kullanmanız gerekecek.

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 sözdizimi istiyorsanız ( Not: yalnızca IE 8+ desteği), Elementprototipi genişletebilir ve kendi setAttributesişlevinizi ekleyebilirsiniz :

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

Bu, aşağıdaki gibi sözdizimini kullanmanıza izin verir:

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

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

Bir ana bilgisayar nesnesini genişletmekten hoşlanmıyorsanız ( bazıları karşıttır ) veya IE7'yi desteklemeniz gerekiyorsa, onu bir işlev olarak kullanın

setAttributeBunun styleIE'de veya olay işleyicilerinde çalışmayacağını unutmayın (yine de yapmamalısınız). Yukarıdaki kod styleolayları yönetir , ancak olayları ele almaz.

Dokümantasyon

• MDN'de nesne prototipleri - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributeMDN'de - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Değişken sayıda argüman alan bir işlev oluşturabilirsiniz:

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

Veya öznitelik / değer çiftlerini bir nesneye iletirsiniz:

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

Ayrıca kendi zincirlenebilir nesne sarmalayıcınızı / yönteminizi de yapabilirsiniz:

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

Çalışma örneği: http://jsfiddle.net/jfriend00/qncEz/

Bir ES5.1 yardımcı işlevi kodlayabilirsiniz:

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

Şöyle diyelim:

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

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

Veya parametrelerden öznitelikler içeren bir öğe oluşturan bir işlev oluşturun

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

Bilginize: height/width='100%'öznitelikler kullanılarak çalışmaz. % 100 yükseklik / genişlik için elemanlara ihtiyacınız varstyle.height/style.width

Bunu dene

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: BURADA

"Element" prototipine basitçe bir yöntem (sonunda "s" bulunan setAttributes) ekleyebilirsiniz:

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

tek satırda tanımlayabilirsiniz:

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

ve diğer yöntemleri çağırdığınızda normal olarak çağırabilirsiniz. Nitelikler bir nesne olarak verilmiştir:

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

Verilen bağımsız değişken bir nesne değilse, bir hata atmak için bir if ifadesi ekleyebilirsiniz.

Bu işlevi aynı anda özellikler oluşturmak ve ayarlamak için kullanın

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

öyle kullan

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

Sanırım bu sınıftaki herhangi bir öğe için öznitelikleri bir kerede ayarlamanın en iyi yolu bu.

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