我应该使用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为元素添加属性吗？

回答

相关问题