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

Source: Internet
Author: User
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

  1. >
  2. <
  3. Html
  4. >
  5. <
  6. Head
  7. >
  8. <
  9. Script
  10. >
  11. /* Functions here */
  12. Script
  13. >
  14. Head
  15. >
  16. <
  17. Body
  18. >
  19. Body
  20. >
  21. Html
  22. >


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. >
  4. Cotton Shirt
  5. P
  6. >


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
  2. TheElement. setAttribute ('data-product-category ', 'sale ');
  3. // Dataset version
  4. TheElement. dataset. productCategory = "sale ";
  5. You can also use the DOM method or dataset to delete an attribute:
  6. // DOM method
  7. TheElement. removeAttribute ('data-product-category ');
  8. // Dataset version
  9. 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.