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

【问题标题】：Html/Javascript: Add Attribute to an HTML ControlHtml/Javascript：向 HTML 控件添加属性
【发布时间】：2009-03-13 19:57:13
【问题描述】：

需要：想办法将有效的标签/属性/属性添加到普通的 html 控件中。

我有一些 javascript/jquery 将点击事件添加到将显示或隐藏 div 的链接。这个想法是使用 $(document).ready 和一个匿名方法来创建 onClick 在页面加载时调用的方法。单击时，将显示带有一些文本的 div。这一切都很好，除了我不知道如何设置文本以便可以在页面加载时完成。我想要的是这样的：

<a href="..." class="showItLink" textToShow="This is the text to show">HI</a>

这样我就可以做到：

$(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                  V V V V V V
          createdDiv = CreateDiv(this.textToShow, "postComment"); 
          $(this).append(createdDiv);
          $(this).children(".postComment").hide();
        }

        $(createdDiv).toggle();
        event.preventDefault();
      }
    );
  }
);

现在除了不是 xhtml 有效（meh）之外，这仅适用于 IE。 Firefox 只是说它不存在。 (this.textToShow) 我可以使用 rel 或 rev 之类的东西，但这看起来很老套。我想知道是否有这样做的有效方法。

以下答案的解决方案

comment = $(".showItLink").attr("comment");
...
createdDiv = CreateDiv(comment, "postComment");

搭配：

<a href="http://www.theironical.com" class="showItLink" comment="hihihi" >HI</a>

【问题讨论】：

标签： javascript jquery dynamic

【解决方案1】：

如果您使用的是 JQuery，只需使用 .attr() 获取和设置属性。

获取：this.attr("textToShow")

设置：this.attr("textToShow", value)

【讨论】：

这很有效，看起来是最好的方法。仍然意味着我必须打破 xhtml 的有效性，但不确定我是否会哭……
我个人会远离 XHTML。在 HTML 5 出来之前，我又回到了 HTML 4。
这与 XML 无关，'textToShow' 属性在旧版 HTML 中与在 XHTML 中一样无效。
很公平，无论我怎么看，这都是一个 hack。

【解决方案2】：

向 html 控件添加属性的方式是使用 element.setAttribute("attributeName", "attributeValue") 其中“element”是要添加属性的元素。

要获取属性，请使用 getAttribute("attributeName");

【讨论】：

【解决方案3】：

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

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

HI

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

【讨论】：

你的意思是像 class="showToLink" xmlns:comment="This is the text to show"？标题的问题在于它仍在使用某些东西而不是它……更不用说它显示在悬停时。
'namespaced' 我的意思是类似于，其中 myns 在根元素中声明，您必须扩展 DTD 以使它“任何东西都有效”（尽管仍然不是“有效的 XHTML”）。
在悬停时出现正是我为该示例选择“标题”的原因 – 这是一种合理的行为，当您悬停链接时，链接会执行此操作，并将文本放在搜索引擎可以看到的位置。显然，“title”不会是所有类型的 value-passing-to-scripts 的一揽子解决方案。

【解决方案4】：

做这种事情的最好方法是将文本隐藏在另一个元素中，然后切换该元素。试试这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>clear test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show-it").click(function() {
                    $("#message").toggle();
                });
            });
        </script>
    </head>
    <body>
        <div>
            <a id="show-it" href="javascript:void(0);">show it</a>
            <div id="message" style="display:none;"> hidden message</div>
            hello world
        </div>
    </body>
</html>

【讨论】：

【解决方案5】：

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

【讨论】：