Html 5 supports Custom data-* features, which are invisible to the UI. For example, data-length can be attached to the input label. For more information, see W3C Html 5 data-manual http://www.w3.org/TR/2012/WD-html5-20120329/global-attributes.html#attr-data
There is a description:
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
The following is a simple example:
<! DOCTYPE html>
<Html>
<Head>
<Title> Html5 custom data attribute Test </title>
</Head>
<Body>
<Li class = "user" data-name = "Peter Liu" data-city = "ShangHai"
Data-lang = "CSharp" data-food = "apple">
<B> Peter says: </B> <span> Hello, how are you? </Span>
</Li>
<Script type = "text/javascript">
Var user = document. getElementsByTagName ("li") [0];
Var pos = 0, span = user. getElementsByTagName ("span") [0];
Var phrases = [
{Name: "city", prefix: "I am from "},
{Name: "food", prefix: "I like to eat "},
{Name: "lang", prefix: "I like to program in "}
];
User. addEventListener ("click", function (){
Var phrase = phrases [pos ++];
// Use the. dataset property
Span. innerHTML = phrase. prefix + user. dataset [phrase. name];
}, False );
</Script>
</Body>
</Html>
Some data-* features are embedded in the li label above. When you click the span, read the value of each data-*, and finally implement a text switching effect. You have noticed that the preceding js uses a dataset attribute. The W3C official introduction to dataset is also available. The above code is tested in Firefox 11.0, Chrome 18.0.1025.151
Note that this is not supported in IE9. IE9 needs to be rewritten to getAttribute
<! DOCTYPE html>
<Html>
<Head>
<Title> Html5 custom data attribute Test </title>
</Head>
<Body>
<Li class = "user" data-name = "Peter Liu" data-city = "ShangHai"
Data-lang = "CSharp" data-food = "apple">
<B> Peter says: </B> <span> Hello, how are you? </Span>
</Li>
<Script type = "text/javascript">
Var user = document. getElementsByTagName ("li") [0];
Var pos = 0, span = user. getElementsByTagName ("span") [0];
Var phrases = [
{Name: "city", prefix: "I am from "},
{Name: "food", prefix: "I like to eat "},
{Name: "lang", prefix: "I like to program in "}
];
User. addEventListener ("click", function (){
Var phrase = phrases [pos ++];
// Use the. dataset property
Span. innerHTML = phrase. prefix + user. getAttribute ('data-'+ phrase. name );
}, False );
</Script>
</Body>
</Html>
The above Code passed the IE 9.0.8112 test. You can also debug js in one step in IE and FF to view the result.
Hope to help your Web development.
Author: Petter Liu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
