Article introduction of Wulin.com (www.vevb.com): Implementing custom attributes in HTML5 is not technically complicated. The real difficulty is whether the method you choose to use is suitable for your project; if applicable, how to make it more effective? Please remember that it is too early to enable the dataset method as a page function, after all, many browsers do not support this function.
HTML5 development is in full swing, and the use of custom attributes in HTML5 is gradually gaining popularity among developers; in addition, it also plays an important role in the semantics of web development. In this article, we will explore the creation and access of HTML5 custom data properties, including JavaScript functions, through practical examples.
Before using HTML5, first add custom attributes to the HTML element and access it through JavaScript. If you have tried it before, you will find that it is easy to ignore tag verification, and HTML5 can provide you with the function of creating and using your own element attributes within a valid web page.
Create HTML5 files:
If you haven't figured out which one to use, you can copy the following code:
< !DOCTYPE html>
<html>
< head>
< script>
/*functions here*/
< /script>
< /head>
<body>
< /body>
< /html>
Set custom elements in body and access them using JavaScript elements in part of the script area of the head.
Create elements:
First, add some simple content and custom attributes as well as elements like IDs so that we can recognize JavaScript examples.
<div id=product1 data-product-category=clothing>
Cotton Shirt
</div>
As you can see, the custom attribute is in the form of: data-*, set the name in the data- section or the name you selected. Using custom properties in HTML5 is the only way to do this. Therefore, if you want to verify that the web page is valid, you can use this method.
Of course, the project details part determines whether a custom property is useful to you and how to name it. This example can be applied to retail websites in different product categories.
Custom properties allow you to use JavaScript code within the page in a special way to set elements, such as animation display capabilities. If there are no standard HTML elements, we recommend using custom properties.
Add a test button
The event can be executed using its own JavaScript elements on the page, provided that the following code is added to the page:
<input type=button value=get attribute onclick=getElementAttribute('product1')/>
Get attributes:
The most common way to access properties in JavaScript is to use getAttributes, which is also the first step we need to do. Add the following function in the head script area of the page:
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, and of course you can also add it in 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, the browser's support for the dataset is still very low, so keeping this in mind this code can execute the same process as the // method behind it.
//var theAttribute = theElement.getAttribute('data-product-category'); var theAttribute = theElement.dataset.productCategory;
Remove data- in the dataset starting with the attribute name, it is still included in the HTML.
Note that if you have a hyphen in your custom property name, this will take the form camel-case when accessed through the data, i.e. (data-product-category becomes productCategory).
Other modules and functions
We have obtained this property and the script can still be set and deleted. The following code demonstrates how to set properties using standard JavaScript modules and datasets.
You can also use the DOM method or dataset to delete a certain attribute:
//DOM method
theElement.removeAttribute('data-product-category');
//dataset version
theElement.dataset.productCategory = null;
Conclusion:
Implementing custom properties in HTML5 is not technically complicated. The real difficulty is whether the method you choose to use is suitable for your project; if so, how can you make it more effective? Please remember that it is too early to enable the dataset method as a page function, after all, many browsers do not support this function.