我應該使用setAttribute爲元素添加屬性嗎？

我正在閱讀頁面（各種）的元素與JavaScript和修改它們，如果需要的話。當我修改其中一個元素時，我想留下一個標記以表示我修改了它。然後，我可以通讀頁面上的元素，如果我找到了那個標記，我知道這是我修改過的元素之一，並且可以恢復它。下面是的工作對我的代碼，但有人建議我應該使用的setAttribute和的getAttribute，而不是我在做什麼：我應該使用setAttribute爲元素添加屬性嗎？

//hide some elements, after first leaving a marker and saving orig. val 
for(var i=0; i<elements.length; i++) { 
    if(should_i_hide_this_element(elements[i])) { //external logic unimportant 

     elements[i].wasModifiedByMe = true;    //mark element as modified 
     elements[i].origViz = elements[i].style.visibility; //save visibility val 
     elements[i].style.visibility = "hidden";   //and give it a new val 
    } 
}

相應的代碼來恢復元素值是這樣的：

for(var i=0; i<elements.length; i++) { 
    if(elements[i].wasModifiedByMe) {     //This is one I modified 
     elements[i].style.visibility = elements[i].origViz; //restore original val 
     elements[i].wasModifiedByMe = false;   //mark as not modified now 
    } 
}

問題是，我應該爲我的wasModifiedByMe布爾值和我的origViz屬性使用setAttribute和getAttribute？我目前不相信我需要爲我自己添加的屬性使用屬性函數。下面

以下螺紋的討論，我想這個測試：

<!doctype html> 
<html> 
<body> 
<div id="mydiv">DIV</div> 
<script> 
var elem = document.getElementById("mydiv"); 
elem.secretproperty = "not_seen_in_elements_tab_in_chrome_dev_tools"; 
elem.setAttribute("publicproperty","is_visible_in_elements_tab"); 
</script> 
</body> 
</html>

，並在Chrome瀏覽器開發工具的元素標籤，我看到mydiv是表明公物屬性作爲DIV的一部分。雖然沒有顯示祕密特性。

這是我的想法。使用setAttribute設置HTML屬性，該屬性也反映在javascript對象中，但是如果不使用setAttribute並向javascript主機對象添加屬性，則反射不會以其他方式進行（TO HTML屬性）。這就是我要的。我不想讓我隱藏的每個元素突然顯示一個wasHiddenByMe =「true」屬性（雖然有這個優點，但我明白了）。

來源

2012-05-31 Dee2000

我的建議是爲此使用類，並根據類編寫CSS。班級的存在告訴你它是否被你修改過。 – kapa

很好的建議，但在這種情況下班級並不合適。我的代碼可以添加到ANY頁面，並在被要求時隱藏一些元素，並在稍後恢復。 – Dee2000

你仍然可以使用類，但是你可以保留'style.visibility'。 – kapa

設置您自己的DOM元素屬性有一些問題，由this article on perfectionkills.com覆蓋。它談論擴展DOM元素的原型，但部分

Host objects have no rules，
Chance of collisions（也Don’t modify objects you don’t own見）和
IE DOM is a mess

是與你有關的。但是，如果您知道這些問題，我認爲它是可以的 - 這是將自定義對象與DOM元素相關聯的唯一方法。

如果你可以使用HTML5技術，你也可以看看data attributes。對於簡單的布爾標記，它們可能是優越的方法。

來源

2012-05-31 13:08:34 Bergi

謝謝。我看了你的鏈接。現在看來（在我的原始文章中添加我的小測試頁後），避免setAttribute是我真正想要的。避免碰撞確實是一個考慮因素，我的變量名稱比原始文章中的示例代碼更獨特。不幸的是，不能使用僅限HTML5的屬性。仍然必須支持傳統瀏覽器。 – Dee2000

如果您在setAttribute方法中使用data- * attributes *，則舊式瀏覽器將支持它。您只能通過[dataset]（https://developer.mozilla.org/en/DOM/element.dataset）屬性以HTML5方式訪問它們。 – Bergi

+1'data-'屬性可用於舊版瀏覽器。對於這些瀏覽器，它們只是HTML屬性。 – kapa

爲了向HTML元素添加屬性，W3C標準是setAttribute。您不能將它用於element .style。 property。

然而，簡單地做element設置屬性。* attribute *仍然有效。這只是一個不真實的標準，所以最好使用setAttribute，但這取決於您的偏好。

來源

2012-05-31 12:50:53 user2428118

我錯誤地認爲div上的element.setAttribute（「xyz」，「XYZ」）在瀏覽器開發工具中查看該元素時會顯示xyz =「XYZ」？而做element.xyz =「XYZ」不會顯示它，因爲它沒有創建HTML屬性，而是創建了元素OBJECT的一個屬性。在這種情況下，這就是我想要的，它不是一個合適的HTML屬性。 – Dee2000

用這個測試用例證實。 var elem = document.getElementById（「mydiv」）; elem.hello =「world」; elem.setAttribute（「搖滾」，「滾動」）;我在chrome dev工具中看到div屬性顯示rock =「roll」，但我從未見過hello =「world」。所以使用setAttribute絕對不是我想要的。我認爲。 – Dee2000

我應該使用setAttribute爲元素添加屬性嗎？

回答

相關問題