zoukankan      html  css  js  c++  java
  • Using Custom Attributes in HTML5

    Custom attributes are among the most significant additions for HTML5, and can play a major role in semantic Web development. In this tutorial we’ll go through a practical example of creating and accessing HTML5 custom data attributes, including the necessary JavaScript functions.

    It was possible before HTML5 to add your own attributes to HTML elements and access them using JavaScript, but if you’ve ever tried it you’ll know you can forget about getting your markup to validate. HTML5 provides the ability to create and use your own element attributes within valid pages.

    Create Your HTML5 Document

    If you don’t already have one you want to use, copy the following outline into an HTML file:

    <!DOCTYPE html> <html> <head> <script> /*functions here*/ </script> </head> <body> </body> </html>

    We will place our elements with custom attributes in the body and the JavaScript functions for accessing them in the head section script area.

    Create an Element

    Let’s add an element with some simple content and a custom attribute as well as an ID so that we can identify it in JavaScript for demonstration:

    <div id="product1" data-product-category="clothing"> Cotton Shirt </div>

    As you can see, the custom attribute has the form: “data-*” with a name or names of your choice after the “data-” section. This is the only valid way to use custom attributes in HTML5, so make sure you start your elements this way if you need your pages to validate.

    Of course the details of your own projects will dictate whether custom attributes are useful to you, as well as how to go about naming them. This example could be for a retail site with different product categories. The custom attributes allow you to treat elements in particular ways within the JavaScript code for the page, for example when using animated display functions. It’s really only advisable to use custom attributes if there is no standard HTML attribute available to do what you need.

    Add a Test Button

    Your own JavaScript functions will execute on events within your pages, but to demonstrate add the following button to your page:

    <input type="button" value="get attribute" onclick="getElementAttribute('product1')"/>

    The button passes the element ID as parameter, so that the JavaScript function can refer to it and access its custom attribute.

    Get the Attribute

    The most common way to access attributes in JavaScript is using “getAttributes” which is what we’ll do first. Add the following function in the script section of your page head:

    function getElementAttribute(elemID) { var theElement = document.getElementById(elemID); var theAttribute = theElement.getAttribute('data-product-category'); alert(theAttribute); }

    We alert the attribute value for demonstration, but your own scripts can do whatever you need with it.

    Get the Dataset

    As an alternative to the DOM “getAttributes” method, you can use the element dataset. This can be more efficient, particularly in cases where your code is iterating through a variety of attributes. However, browser support for dataset is still very low, so do bear this in mind. This code carries out the same process as the line commented out from the previous approach:

    //var theAttribute = theElement.getAttribute('data-product-category'); var theAttribute = theElement.dataset.productCategory;

    With dataset you remove the “data-” from the start of the attribute name when referring to it in JavaScript – you do still need to include it in your HTML though. Notice that if your custom attribute name has a hyphen in it, which ours does, this becomes camel-case when accessed through the dataset (“data-product-category” becomes “productCategory”).

    Other Methods and Functions

    We have explored getting attributes, but your scripts can also set and remove them. The following code demonstrates setting attributes using the standard JavaScript method and the dataset alternative:

    //DOM method theElement.setAttribute('data-product-category', 'sale');  //dataset version theElement.dataset.productCategory = "sale";

    To remove an attribute, you can also use either a DOM method or the dataset:

    //DOM method theElement.removeAttribute('data-product-category');  //dataset version theElement.dataset.productCategory = null;

    Conclusion

    Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently. Finally, do remember that it’s still a little early to start using the dataset approach for functions your pages rely on, so be sure to provide an alternative for non-supporting browsers.

  • 相关阅读:
    博客园-随笔分类批量修改
    【读书笔记】--少有人走的路①:心智成熟的旅程
    自定义菜单用例
    自定义菜单创建接口
    发送消息---被动回复用户消息
    接收消息----接收语音识别结果
    接收消息----接收事件推送
    微信开发入门教程
    Hadoop维护IPC链接
    Hadoop建立IPC连接和数据读写
  • 原文地址:https://www.cnblogs.com/shihao/p/2465187.html
Copyright © 2011-2022 走看看