首页 文章

XHTML 1.0 Strict中的自定义数据

提问于
浏览 次
7

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

html xhtml-1.0-strict custom-data-attribute

5 回答

  • -2

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

    <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严格的要求，并且还允许您使用即插即用的解决方案:)

    回复于
  • 0

    你有两个选择可供选择 .

    假设您希望特定于站点的自定义属性用于脚本，一种方法是使用要添加属性的元素直接嵌入脚本 . 例如：

    <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>

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

    所以你可以拥有

    <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 对象作为第一个选项添加到span .

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

    这两种方法都符合XHTML 1.0 Strict，并且在作为 text/html 或 application/xhtml+xml 提供时可以使用

    回复于
  • 1

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

    没有 .

    （你应该关心吗？可能不是，但那是你的电话 . ）

    回复于
  • 5

    如果您需要正确的XHTML，则需要使用HTML5 doctype（ <!doctype html> ） . 然后，您可以使用 data- 属性 .

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

    这是完全有效的XHTML严格（我在我的网站上使用它） . 这样做的目的是使W3C不会出现并创建一个与您在网站上使用的名称相同的属性并将其中断 .

    要在JavaScript中获取值，您需要使用 elem.getAttribute('data-name'); . W3M规范确实包括使用 ele.dataset.name 但尚未得到各种浏览器的支持 .

    回复于
  • -1

    我看待它的方式，我根据XHTML规范't really care if it'有效 if 我将它作为 text/html 服务，因为它无论如何都不会 real xhtml . 在99％的xhtml用途中就是这种情况 .

    只要你不必担心验证者会告诉你什么 as long as you are aware why . XHTML 1.0规范是在几年前编写的 . 技术发展迅速 . 如果您在规范编写时限制自己制作网站"valid"，则永远无法使用新功能 .

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

    回复于

相关问题