Html / Javascript：向HTML控件添加属性

需要：找到一种方法将有效的标记/属性/属性添加到普通的html控件。

我所拥有的是一些javascript / jquery将click事件添加到将显示或隐藏div的链接。 我们的想法是使用$（document）.ready和一个匿名方法来创建在页面加载时由onClick调用的方法。 单击时，将显示带有一些文本的div。 这一切都很好，除了我无法弄清楚如何设置文本，以便可以在页面加载上完成。 我想要的是：

HI 

所以我可以这样做：

 $(document).ready ( function() { $("..showItLink").click ( function(event) { var containerPosition; var createdDiv; //see if the div already exists createdDiv = $(this).children(".postComment"); if (createdDiv.length == 0) { //This is where the attribute is used so that the CreateDiv //method can take the textToShow and fill the div's innerText //with it VVVVVV createdDiv = CreateDiv(this.textToShow, "postComment"); $(this).append(createdDiv); $(this).children(".postComment").hide(); } $(createdDiv).toggle(); event.preventDefault(); } ); } ); 

现在除了不是xhtml有效（meh），这只适用于IE。 Firefox只是说它不存在。 （this.textToShow）我可以使用像rel或rev这样的东西，但这看起来像是hackish。 我想知道是否有一种有效的方法。

从下面的答案解决

 comment = $(".showItLink").attr("comment"); https://stackoverflow.com/questions/644358/html-javascript-add-attribute-to-an-html-control/... createdDiv = CreateDiv(comment, "postComment"); 

搭配：

 HI 

Answer 1

如果您正在使用JQuery，只需使用.attr（）获取并设置属性。

获取：this.attr（“textToShow”）

设置：this.attr（“textToShow”，value）

Answer 2

向html控件添加属性的方法是使用element.setAttribute（“attributeName”，“attributeValue”），其中“element”是要添加属性的元素。

要获取属性，请使用getAttribute（“attributeName”）;

Answer 3

在仍然有效的情况下，您无法将自定义属性添加到HTML元素中。 它通常可以在当前的浏览器中运行，但它有点脆弱，如果你碰巧选择一个正在使用的名称（现在或将来）作为任何浏览器的HTML或JavaScript属性，冲突将阻止它工作。

HTML5提出名称以“data-”开头的属性作为有效的扩展机制。 您还可以考虑XHTML中的命名空间元素; 这在技术上仍然不是DTD的“有效XHTML”，但至少它不会发生冲突。

HI

我建议为此特定目的使用’title’属性。

Answer 4

执行此类操作的最佳方法是将文本隐藏在另一个元素中，然后切换该元素。 尝试这样的事情：

         
 show it 
 hidden message
 hello world 
   

Answer 5

如果你的textToShow属性是一个expando属性，那么this.textToShow将不会返回undefined，但由于它是一个自定义属性，你需要使用jQuery的this.attr（“textToShow”）或标准DOM this.getAttribute（“textToShow”） ）。