Custom data in XHTML 1.0 Strict

问题

I use some custom attributes in my html, for jquery stuff. I saw there are data-XYZ attributes in HTML5, but I need to be xhtml 1.0 strict. What other options do I have?

回答1:

You can use the jQuery MetaData plugin which allows you to write data in the class attribute in JSON format:

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

Then in your jQuery, to get at the data:

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

This should meet your requirements of being xhtml 1.0 strict, and also allows you to use a plug-and-play solution :)

回答2:

You have a couple of options that spring to mind.

Assuming you want site-specific custom attributes for use with scripting, one way is to embed a script right with the element you want to add attributes to. For example:

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

Another way of adding extra data to your elements is to embed the data in the class attribute.

So you could have

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

If you're using the data for scripting, then you can add the script below to extract this data. You can add this just before the close body tag.

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

This should result in the same myData object being added to the span as the first option.

The http://example.com/hasData class is just a flag to indicate which elements should be processed. You can use any string you like for this purpose.

Both methods are XHTML 1.0 Strict compliant and will work when served either as text/html or application/xhtml+xml

回答3:

I just want to know if the strict spec allows for some way of adding extra data to elements.

No.

(Should you care? Probably not, but that's your call.)

回答4:

If you want proper proper XHTML, you need to use the HTML5 doctype (<!doctype html>). Then you can use the data- attributes.

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

This is perfectly valid XHTML strict (I use this on my website). The purpose for this is so that the W3C doesn't come along and create an attribute with the same name as one you have been using on your website and break it.

To get the value in JavaScript, you need to use elem.getAttribute('data-name');. The W3M spec does include using ele.dataset.name but this is not supported by a wide varity of browsers yet.

回答5:

The way I look at it, I don't really care if it's valid per the XHTML spec if I am serving it as text/html because it won't be real xhtml anyway. This is the case in 99% of uses of xhtml.

As long as you don't have critical errors such as missing end tags and such, you don't necessarily have to worry about what the validator tells you as long as you are aware why. The XHTML 1.0 spec was written years ago. Technology moves fast. You'll never be able to use new features if you restrict yourself to make your site "valid" at the time of the spec writing.

Though my real suggestion would be to just switch to HTML 5 - the xhtml syntax AFAIK is compatible with HTML 5. There may be some minor inconsistencies but for the most part it should be a fairly straight-forward transition.

来源：https://stackoverflow.com/questions/4189036/custom-data-in-xhtml-1-0-strict

标签

html

xhtml-1.0-strict

custom-data-attribute