Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to understand the standard attributes and custom attributes in HTML5. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

As stated in the HTML5 syntax, an element can contain attributes (attributes) to set various attributes (properties) to an element.

Some attributes are defined globally and can be used on any element, while others are defined as element-specific. All properties have a name and a value, as shown in the following example.

The following is an example of using the HTML5 attribute to demonstrate how to mark a div element with an attribute named class and the value "example":

...

Attributes can only be specified in the start tag and should never be used in the end tag.

The HTML5 property is case-insensitive and can be used in all uppercase or mixed use, although the most common convention is to always use lowercase.

Standard attribute

Almost all HTML5 tags for the attributes listed below are supported.

The property options feature accesskey users customize keyboard shortcuts to access elements. Alignright, left, center horizontal alignment tags. BackgroundURL sets a background image after the element. Bgcolor value, hexadecimal value, RGB value sets a background color after the element. Class user defined. Classify an element to facilitate the use of cascading style sheets. Contenteditabletrue, false defines whether the user can edit the contents of the element. ContextmenuMenu id defines the context menu for the element. Data-XXXX user defined. Custom properties. The author of an HTML document can define its own properties. Custom properties must start with "data-". Draggabletrue,false, auto defines whether the user can drag elements. Height numeric values define the height of a table, image, or table cell. Hiddenhidden defines whether the element should be visible. Id user defined. Name the element to facilitate the use of cascading style sheets. List of item elements. Used to combine elements. List of itemprop entries. Used to combine entries. Spellchecktrue, false defines whether an element must have spelling or error checking. StyleCSS style sheet. Define an inline style for an element. Subject user-defined id. Defines the entry associated with the element. TabindexTab number is set in the order of the tab key of the element. Title user defined. The pop-up title of the element. Vertical alignment of tags within valigntop, middle, and bottomHTML elements. Width numeric value. Defines the width of tables, images, and table cells.

Custom attribute

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. Here is a simple example:

...

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

Add custom attributes to HTML elements and access them through JavaScript. If you have tried before, you will find it easy to ignore tag validation, while HTML5 can provide you with the ability to create and use your own element attributes in a valid web page.

Create a HTML5 file:

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

XML/HTML Code copies content to the clipboard

/ * functions here*/

Set the custom element in body and access it using the JavaScript element in part of the script area of head.

Create an element:

First, add some simple content and custom attributes, as well as elements such as ID, so that we can recognize the JavaScript example.

XML/HTML Code copies content to the clipboard

Cotton Shirt

As you can see, the custom attribute takes the form of "data-*". Set the name in the "data-" section or the name of your choice. Using custom properties in HTML5 is the only effective way. Therefore, you can only use this method if you want to verify that the web page is valid.

Of course, the details of the project determine whether custom attributes are useful to you and how to name them. This example can be applied to retail websites of different product categories.

Custom properties allow you to use the JavaScript code on the page to set elements in a special way, such as animation. If there is no standard HTML element, we recommend using custom attributes.

Add Test Button

Events can be executed on the page using its own JavaScript element, as long as the following code is added to the page:

XML/HTML Code copies content to the clipboard

Get attributes:

The most common way to access properties in JavaScript is to use "getAttributes", which is the first step we will take. Add the following functions to the head script area of the page:

JavaScript Code copies content to the clipboard

Function getElementAttribute (elemID) {

Var theElement = document.getElementById (elemID)

Var theAttribute = theElement.getAttribute ('data-product-category')

Alert (theAttribute)

}

Here, we have added the alert value to the example, but you can also add it to the script according to your own needs.

Get data:

You can use element datasets instead of DOM "getAttributes", which may be more efficient, especially in some cases where the code iterates through multiple attributes. However, browser support for datasets is still very low, so keep this in mind that this code can perform the same process as the / / later method.

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

Var theAttribute = theElement.dataset.productCategory

Remove "data-" from the dataset starting with the attribute name, which is still included in the HTML.

Note that if you have a hyphen in your custom property name, it will take the form of camel-case when accessed through data, that is, ("data-product-category" becomes "productCategory").

Other modules, functions

We have obtained this property, and the script can still set and delete it. The following code demonstrates how to set properties using standard JavaScript modules and datasets.

JavaScript Code copies content to the clipboard

/ / DOM method

TheElement.setAttribute ('data-product-category',' sale')

/ / dataset version

TheElement.dataset.productCategory = "sale"

You can also use the DOM method or dataset to delete an attribute:

/ / DOM method

TheElement.removeAttribute ('data-product-category')

/ / dataset version

TheElement.dataset.productCategory = null

Implementing custom properties in HTML5 is not technically complicated, but the real difficulty is whether the method you choose to use is appropriate for your project, and if so, how to make it more effective? Keep in mind that it is too early to enable the dataset method as a page feature, which is not supported by many browsers.

On how to understand the standard attributes and custom attributes in HTML5 to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.