通過javascript在html標簽內添加額外的屬性

Question

假設我們有一組html標簽

<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>

我試圖在div標簽中添加一個額外的屬性，比如每個標簽的數組[post, get, search] key='post' 。 有可能使用javascript嗎？

如果輸入是哈希而不是數組，我還想知道如何

 {"post" : ["0","1"], "get": ["0","2"], "search": ["2","1"]} 

Answer 1

是的，這是可能的，只需像這樣使用element.setAttribute（）：

var element = document.getElementById("slide1");
element.setAttribute('key','post');

Answer 2

var attrs = ['post', 'get', 'search'];
for (var i = 0, n = attrs.length; i < n; ++i) {
    var el = document.getElementById('slide' + (i + 1));
    el.setAttribute('key', attrs[i]);
}

或者，如果您使用jQuery（並假設只有這三個元素具有slide類）：

var attrs = ['post', 'get', 'search'];
$('.slide').attr('key', function(i) {
    return attrs[i];
});

問題的更新部分（使用對象“散列”而不是數組）將無法工作，因為對象沒有定義的排序。 您可以獲取標簽，但它們不會以確定的順序出現：

var myobj = {"post" : ["0","1"], "get": ["0","2"], "search": ["2","1"]};
var attrs = Object.keys(myobj);
... // as above

有關Object.keys文檔，請參閱MDN站點，包括舊瀏覽器的填充程序。

Answer 3

設置屬性是您正在尋找的：

https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

var d = document.getElementById("slide1"); 
d.setAttribute("key", "post");