代码之家 › 专栏 › 技术社区 › cambraca

XHTML1.0strict中的自定义数据

custom-data-attribute xhtml-1.0-strict html

cambraca · 技术社区 · 14 年前

我在html中使用了一些自定义属性,用于jquery。我看到了 data-XYZ HTML5中的属性,但我需要严格执行XHTML1.0。我还有别的选择吗?

5 回复 | 直到 14 年前

Jess Telford Mark Elliot 13 年前

你可以使用 jQuery MetaData plugin 它允许您以JSON格式在类属性中写入数据:

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

然后在jQuery中,获取数据:

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

这应该满足您严格执行XHTML1.0的要求,并且还允许您使用即插即用解决方案:)

Alohci 14 年前

你有几个突然想到的选择。

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

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

如果使用数据编写脚本,则可以添加下面的脚本来提取此数据。您可以在close body标记之前添加此项。

  <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 类只是指示应处理哪些元素的标志。你可以使用任何你喜欢的字符串。

这两种方法都严格遵循XHTML1.0,并且在作为 text/html 或 application/xhtml+xml

Ms2ger 14 年前

我只想知道严格的规范是否允许在元素中添加额外的数据。

不。

(你应该关心吗?可能不会,但这是你的决定。)

-1

Youarefunny 14 年前

如果您想要正确的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 但是这还没有被广泛的浏览器所支持。

-2

meder omuraliev 14 年前

从我的角度来看,我并不在乎它是否符合XHTML规范如果我把它当作 text/html 因为它不会 真正的xhtml 无论如何。99%的xhtml使用都是这种情况。

只要你没有关键的错误,比如缺少结束标记等等,你就不必担心验证器告诉你什么 只要你知道为什么 . XHTML1.0规范是多年前编写的。技术进步很快。如果在规范编写时限制自己使站点“有效”,则永远无法使用新功能。

尽管我真正的建议是切换到HTML5—xhtml语法AFAIK与HTML5兼容。可能会有一些小的矛盾,但在很大程度上,这应该是一个相当直接的过渡。