HTML custom labels and labels custom properties

Most browsers support custom HTML tags and custom attributes for standard labels, and many browsers support both of these custom behaviors directly.

Customizing HTML tags

In modern browsers such as Firefox and Chrome, custom tags are simple to write as standard labels, and CSS and JavaScript have no two-way definition tags and standard tags.

123456789

<foo id="idFoo" style="color:red" data-bar="bar">foo tag!</foo><script>    (function(){        console.log($("foo").text()); //foo tag!        console.log($("foo").data("bar")); //bar        console.log(document.getElementById("idFoo").innerHTML); //foo tag!        console.log(document.getElementById("idFoo").getAttribute("data-bar")); //bar    })();</script>

Firefox 21,chrome 27,ie 10 performance is very normal. IE9 is not tested and is said to be no problem.

However, it is said that custom tags are not as simple as IE8 and before, and you can customize HTML tags by adding a namespace or document.createelement ("Custom tag name"), but if you want to use a CSS selector on your custom label, You must use Document.createelement ("Custom label name"), regardless of whether an XML namespace has been defined. See here.

There are also reports of a IE8 custom label issue, "beforehand has been document.createelement (' Thetag '), but subsequent to the addition of this element by innerHTML Way, IE8 is not recognized, createelement + AppendChild can ".

The new project has decided to support only the firefox,chrome,ie9+ version, ie6,7,8 and the like to go with it.

Label Custom Properties

Custom Label properties are often used, but there has been no specification to constrain how to customize label properties, leading to some confusion and portability issues. Now HTML5 adds a custom data property to the attribute.

It is simple, as long as the custom attribute begins with data-, followed by at least one character, but cannot contain the character u+0041 to u+005a (LATIN capital letter A to LATIN capital letters Z). Each element can contain more than one custom attribute.

These data-properties are not displayed on the page and do not affect the layout and style of the page, but are readable and writable.

jquery has supported the use of the data method to read the custom data-property, and it is convenient to support JSON-formatted property values.

1234567891011

<foo id="idFoo" style="color:red" data-bar="bar" data-obj=‘{"key1":"value1"}‘ >foo tag!</foo><script>    (function(){        console.log($("foo").text()); //foo tag!        console.log($("foo").data("bar")); //bar        console.log($("foo").data("obj").key1); //value1        console.log(document.getElementById("idFoo").innerHTML); //foo tag!        console.log(document.getElementById("idFoo").innerText); //foo tag!注:firefox 21不支持        console.log(document.getElementById("idFoo").getAttribute("data-bar")); //bar    })();</script>

In the code above, using JSON data in a custom attribute is important to note, be sure to use single quotation marks inside the outer layer, use double quotes in the inner layers, and, conversely, Firefox and Chrome will report undefined.

Custom Label InnerText Properties, Firefox 21 not supported, output "undefined", chrome 27 and IE 10 output is normal.

You can also assign a value to a custom data property by using data (Key,value).

The custom Data Property code is passed in the Friefox 21,chrome 27,ie 10 test.

UPDATE (05/21/2014):
The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

The data-attribute (attributes) obtains its value only on the first read, caches it inside jquery, and then no longer reads or alters the data-feature. That is, after the first read, if the value of the attribute is modified by the. attr () method and then read by the data method, it is still the original value.

References:
[1] HTML 5 data-x Custom attributes and jquery's data () method

HTML custom labels and labels custom properties