如何使用JavaScript將屬性添加/更新到HTML元素？

Question

我正在嘗試找到一種使用JavaScript添加/更新屬性的方法。 我知道我可以使用setAttribute()函數，但這在IE中不起作用。

Answer 1

您可以在此處閱讀許多不同瀏覽器中屬性的行為，包括IE。

即使在IE中， element.setAttribute()應該可以解決問題。 你試過嗎？ 如果它不起作用，則可能element.attributeName = 'value'可能有效。

Answer 2

如果你想要完全兼容，看起來容易的事實上是很棘手的。

var e = document.createElement('div');

假設您要添加“div1”的ID。

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

這些都將工作，除了IE 5.5中的最后一個（這是古代歷史，但仍然是XP的默認，沒有更新）。

但當然還有突發事件。 在8之前的IE中不起作用： e.attributes['style']不會出錯而是實際上不會設置類，它必須是className： e['class'] 。
但是，如果你正在使用屬性，那么這將起作用： e.attributes['class']

總之，將屬性視為文字和面向對象。

在字面上，你只是希望它吐出x ='y'而不考慮它。 這是屬性，setAttribute，createAttribute的用途（IE的樣式異常除外）。 但因為這些都是對象，所以事情可能會變得混亂。

因為你要正確地創建一個DOM元素而不是jQuery innerHTML slop，我會把它視為一個並堅持使用e.className ='fooClass'和e.id ='fooID'。 這是一個設計偏好，但在這種情況下，嘗試對待除了對象之外的其他任何東西。

它永遠不會像其他方法那樣適得其反，只要知道class是className而style是一個對象，所以它的style.width not style =“width：50px”。 還要記住tagName，但這已經由createElement設置，所以你不必擔心它。

這比我想要的要長，但JS中的CSS操作是棘手的事情。

Answer 3

強制性的jQuery解決方案 。 查找並將title屬性設置為foo 。 請注意，這選擇了一個單元素，因為我是通過id進行的，但您可以通過更改選擇器輕松地在集合上設置相同的屬性。

$('#element').attr( 'title', 'foo' );

Answer 4

你想對這個屬性做什么？ 它是一個html屬性還是屬於你自己的東西？

大多數情況下，您可以簡單地將其作為屬性來處理：想要在元素上設置標題？ element.title = "foo"會做到這一點。

對於您自己的自定義JS屬性，DOM本身是可擴展的（aka expando = true），其簡單的結果是您可以執行element.myCustomFlag = foo並隨后讀取它而不會出現問題。