7

我在我的 html 中使用了一些自定义属性，用于 jquery 的东西。我看到HTML5中有data-XYZ属性，但我需要严格xhtml 1.0。我还有什么其他选择？

4

6 回答 6

5

您可以使用jQuery MetaData 插件，它允许您以 JSON 格式在类属性中写入数据：

<li class="someclass {some: 'data'} anotherclass">...</li>

然后在你的 jQuery 中，获取数据：

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

这应该满足您对 xhtml 1.0 严格的要求，并且还允许您使用即插即用的解决方案:)

于 2010-11-23T09:31:18.507 回答
1

你有几个选择。

假设您希望特定于站点的自定义属性与脚本一起使用，一种方法是将脚本嵌入到要添加属性的元素中。例如：

  <span id="myId1"><script type="text/javascript">
      var myId1Span = document.getElementById("myId1");
      myId1Span.myData = {};
      myId1Span.myData.firstname = "John";
      myId1Span.myData.surname = "Smith";
  </script>My Text</span>

向元素添加额外数据的另一种方法是将数据嵌入到类属性中。

所以你可以有

<span class="myCssClass http://example.com/hasData 
                data-firstname:John data-surname:Smith">My Text</span>

如果您将数据用于脚本，那么您可以添加下面的脚本来提取此数据。您可以在关闭正文标记之前添加它。

  <script type="text/javascript">
      //<![CDATA[
      if (! document.getElementsByClassName)
      {
        // From http://lawrence.ecorp.net/inet/samples/js-getelementsbyclassname.shtml
        document.getElementsByClassName = function(class_name)
        {
          var docList = this.all || this.getElementsByTagName('*');
          var matchArray = new Array();

          var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
          for (var i = 0; i < docList.length; i++)
          {
            if (re.test(docList[i].className) )
            {
              matchArray[matchArray.length] = docList[i];
            }
          }
          return matchArray;
        }
      }

      var hasData = document.getElementsByClassName("http://example.com/hasData");
      for (var i = 0 ; i < hasData.length ; i++)
      {
        var myElem = hasData[i];
        myElem.myData = {};
        var dataClassList = myElem.className.split(" ");
        for (var j = 0 ; j < dataClassList.length ; j++)
        {
          var dataCandidate = dataClassList[j];
          if (dataCandidate.substring(0, 5) == "data-")
            if (dataCandidate.indexOf(":") >= 0)
            { 
              var nameValue = dataCandidate.split(":", 2);
              myElem.myData[nameValue[0].substring(5)] = nameValue[1];
            }
        }
      }
      //]]>
  </script>

这应该导致与myData第一个选项相同的对象被添加到跨度中。

http://example.com/hasData类只是一个标志，用于指示应处理哪些元素。为此，您可以使用任何您喜欢的字符串。

这两种方法都符合 XHTML 1.0 Strict，并且在作为text/html或application/xhtml+xml

于 2010-11-21T12:56:47.457 回答
0

我只想知道严格的规范是否允许以某种方式向元素添加额外的数据。

不。

（你应该在乎吗？可能不会，但那是你的决定。）

于 2010-11-20T21:13:33.053 回答
0

这是一个有效的 XHTML 1.0 的建议解决方案

<li class="someclass someData anotherclass">...</li>

结合

<style>
someData {
  --custom-some: data
}
</style>

或者直接在元素上使用样式属性。

注 1：class 属性的语法不允许 json 元数据。打开的大括号不是有效的 NMToken。注意2：元数据中的属性名称以--custom-开头，以避免CSS本身内容的验证问题

于 2020-08-24T16:39:50.827 回答
-2

我看它的方式，如果我提供它，我真的不在乎它是否符合 XHTML 规范，因为它无论如何text/html都不是真正的 xhtml 。这是 99% 的 xhtml 使用情况。

只要您没有出现诸如缺少结束标签之类的严重错误，您就不必担心验证器会告诉您什么，只要您知道原因。XHTML 1.0 规范是多年前编写的。技术发展迅速。如果您在编写规范时限制自己使您的网站“有效”，您将永远无法使用新功能。

虽然我真正的建议是切换到 HTML 5 - xhtml 语法 AFAIK 与 HTML 5 兼容。可能会有一些细微的不一致，但在大多数情况下，它应该是一个相当直接的转换。

于 2010-11-15T21:41:25.820 回答
-2

如果您想要正确的 XHTML，您需要使用 HTML5 doctype ( <!doctype html>)。然后就可以使用data-属性了。

<element data-usage='for an example' data-number='28' />

这是完全有效的 XHTML strict（我在我的网站上使用它）。这样做的目的是让 W3C 不会出现并创建一个与您在您的网站上使用的名称相同的属性并破坏它。

要获取 JavaScript 中的值，您需要使用elem.getAttribute('data-name');. W3M 规范确实包括使用ele.dataset.name，但目前各种浏览器还不支持。

于 2010-11-25T23:58:35.873 回答