113

JavaScript で一度に複数の属性を設定するにはどうすればよいですか? 残念ながら、このプロジェクトでは jQuery のようなフレームワークを使用できません。これが私が今持っているものです：

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

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

14 に答える 14

143

ヘルパー関数を作成できます。

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

このように呼んでください：

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});
于 2012-09-05T05:06:36.590 に答える
16

フレームワーク-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-をサポートする必要がある場合は、関数として使用してください。

IEやイベントハンドラーでsetAttributeは機能しないことに注意してください（とにかく機能しないはずです）。style上記のコードはstyle、イベントを処理しますが、処理しません。

ドキュメンテーション

于 2012-09-05T05:18:48.417 に答える
12

可変数の引数を取る関数を作成できます。

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/

于 2012-09-05T05:13:28.377 に答える
4

これを試して

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

デモ:こちら

于 2015-02-18T12:26:33.037 に答える
4

または、パラメーターから属性を含む要素を作成する関数を作成します

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

于 2012-09-05T05:28:24.350 に答える
0

それは簡単な方法です

let div = document.getElementsByTagName("div")[0];

let attr = ["class", "id", "title"];
let attrVlu = ["ahmed", "mohamed", "ashraf"];

for(let i = 0; i < 3; i++) {
    div.setAttribute(attr[i], attrVlu[i]);
}
于 2022-02-15T11:24:11.693 に答える