Comprehensive Analysis of standard and Custom Attributes in HTML5 _ html5 tutorial skills-

This article mainly introduces the standard attributes and Custom Attributes in HTML5. It also describes some knowledge points related to accessing custom attributes during DOM operations in JavaScript. It is highly recommended, for more information, see the HTML5 syntax. An element can contain attributes to set properties for an element ).

Some attributes are defined as global and can be used on any element, while others are defined as unique to the element. All attributes have a name and a value, as shown in the following example.

The following example shows how to mark a p element with the attribute and value "example" named class:

...

The attribute can only be specified in the start tag. It cannot be used in the end tag.

HTML5 attributes are case-insensitive and can be used in uppercase or in combination, although the most common convention is to always use lowercase letters.

Standard attributes
Almost all HTML5 tags of the attributes listed below are supported.

Attribute	Option	Function
Accesskey	User-Defined	Define the keyboard shortcut for the access element.
Align	Right, left, center	Horizontal Alignment labels.
Background	URL	Set a background image after the element.
Bgcolor	Numeric value, hexadecimal value, RGB Value	Set a background color after the element.
Class	User-Defined.	Classify an element to facilitate the use of Cascading Style Sheets.
Contenteditable	True, false	Defines whether users can edit the content of an element.
Contextmenu	Menu id	Defines the context menu for the element.
Data-XXXX	User-Defined.	Custom Attributes. The author of an HTML document can define its own attributes. Custom Attributes must start with "data.
Draggable	True, false, auto	Determines whether users can drag elements.
Height	Numeric Value	Defines the height of a table, image, or table unit.
Hidden	Hidden	Define whether the element should be visible.
Id	User-Defined.	Name elements to facilitate the use of Cascading Style Sheets.
Item	Element list.	Used to combine elements.
Itemprop	List of entries.	Used to combine entries.
Spellcheck	True, false	Defines whether the element must have a spelling or error check.
Style	CSS style sheets.	Defines inline styles for elements.
Subject	User-Defined id.	Define the entries associated with the element.
Tabindex	Tab number	The tab key sequence of the element.
Title	User-Defined.	The "pop-up" title of the element.
Valign	Top, middle, bottom	Vertical Alignment of tags in HTML elements.
Width	Numeric value.	Defines the width of tables, images, and table units.

Custom Attributes
HTML5 also introduces a new feature that allows you to add custom data attributes.

Custom data attributes start with "data-" and are named based on our requirements. The following is a simple example:

...

In the preceding example, two custom attributes, data-subject and data-level, are fully valid in HTML5. We can also use JavaScript APIs or get their values in CSS in a way similar to getting standard properties.

Add custom attributes to HTML elements and access them through JavaScript. If you have tried it before, you will find that tag verification is easy to ignore, HTML5 allows you to create and use your own element attributes on a valid webpage.

Create an HTML5 file:

If you haven't thought about which one to use, you can copy the following code:

Copy XML/HTML Code to clipboard

2. >
4. <
5. Html
6. >
8. <
9. Head
10. >
12. <
13. Script
14. >
16. /* Functions here */
18. Script
19. >
22. Head
23. >
25. <
26. Body
27. >
30. Body
31. >
34. Html
35. >

Set custom elements in the body and access them using JavaScript elements in the script area of the head.

Creation element:

First, add some simple content, custom attributes, IDs, and other elements so that we can recognize JavaScript examples.

Copy XML/HTML Code to clipboard

1. <
2. P id = "product1" data-product-category = "clothing"
3. >
5. Cotton Shirt
7. P
8. >

As you can see, custom attributes are in the form of "data-*". In the "data-" section, set the name or the name you selected. Using custom attributes in HTML5 is the only valid method. Therefore, if you want to verify whether the webpage is valid, you can use this method.

Of course, the project details section determines whether custom attributes are useful to you and how to name them. This example applies to retail websites of different product categories.

Custom Attributes allow you to use JavaScript code on the page to set elements in a special way, such as the animation display function. If there are no standard HTML elements, we recommend that you use custom attributes.

Add test button

You can execute an event on the page by using its own JavaScript element, provided that the following code is added to the page:

Copy XML/HTML Code to clipboard

1. <
2. Input type = "button" value = "get attribute" onclick = "getElementAttribute ('product1 ')"
3. />

Get attributes:

The most common method to access attributes in JavaScript is to use "getAttributes", which is also the first step. Add the following functions in the head script area on the page:

Copy the content to the clipboard using JavaScript Code

1. Function getElementAttribute (elemID ){
2. Var theElement = document. getElementById (elemID );
3. Var theAttribute = theElement. getAttribute ('data-product-category ');
4. Alert (theAttribute );
5. }

Here, we have added the alert value for the example. You can also add it to the script as needed.

Get data:

You can use an element dataset to replace DOM "getAttributes", which may be more effective, especially in some cases, code iterates through multiple attributes. However, the browser still has low support for datasets, so keep this in mind. This code can execute the same process as the method at the end.

// Var theAttribute = theElement. getAttribute ('data-product-category ');
Var theAttribute = theElement. dataset. productCategory;
Delete "data-" from the dataset from the attribute name, which is still included in HTML.

Please note that if your custom property name contains a hyphen, this will take the form of camel-case when accessing data, ("data-product-category" is changed to "productCategory ").

Other modules and functions

We have obtained this attribute, and the script can still be set and deleted. The following code demonstrates how to set attributes using standard JavaScript modules and datasets.

Copy the content to the clipboard using JavaScript Code

1. // DOM method
3. TheElement. setAttribute ('data-product-category ', 'sale ');
4. // Dataset version
6. TheElement. dataset. productCategory = "sale ";
7. You can also use the DOM method or dataset to delete an attribute:
9. // DOM method
10. TheElement. removeAttribute ('data-product-category ');
11. // Dataset version
12. TheElement. dataset. productCategory = null;

In HTML5, the technology for implementing custom attributes is not very complex. What is really difficult is whether the method you choose applies to your project. If so, how can you make it more effective? Remember, it is too early to enable the dataset method as a page function. After all, many browsers do not support this function for the time being.