Home > Web Front-end > H5 Tutorial > body text

How to get and set custom attributes in H5

一个新手
Release: 2017-09-14 10:26:50
Original
3352 people have browsed it

Customizing attributes for elements is a new feature added in HTML5. Simply put, the custom data attribute specification specifies that any attribute name starting with data- must be assigned a value. Custom data attributes are used to save private custom data of a page or application. These custom data attributes are saved in the DOM and have no impact on the layout and performance of the entire DOM. However, they can facilitate the interaction and control of the entire web page. expression effect.
For example, we get all the cities in a certain area through an object, but we also need to get other information about the city to facilitate the next operation. We can add a custom attribute to the label of this city to store it. For other information in this area, we can directly get the value through the attribute name we set during operation, which can greatly increase the operation volume of us and the computer.
When storing a value in an attribute, please note that it must be a string or an object, so when the data that needs to be stored is an object, remember to convert it into a string.

var cityStr = JSON.stringify(cityObj);
Copy after login

For the acquisition and setting of data attribute values, JQ provides two Methods attr() and data()
When only one parameter is passed, this parameter is the attribute name and is used to obtain the value of the attribute.
When passing two parameters, the attribute name and attribute value are set.

 $(selector).attr(attribute,value)
Copy after login

The following is a small case of using data to access custom attributes:

<p id="box1"></p><button id="btn1">click1</button><button id="btn2">click2</button></body><script src="../assets/jquery-1.9.1.min.js"></script><script>
    //点击click1向box添加属性student,属性值为tom
    $("#btn1").click(function () {
        $("#box1").data("student","tom")
    });    //通过属性名获取属性值
    $("#btn2").click(function () {
        alert($("#box1").data("student"));
    });</script>
Copy after login

Use attr to achieve the same effect.

<script>
    $("#btn").click(function () {
        $("#box1").attr("data-student","tom")
    });
    $("#btn2").click(function () {
        alert($("#box1").attr("data-student"));
    });</script>
Copy after login

How to get and set custom attributes in H5
You can see through the developer tools that when you click the save button (click1), custom attributes are automatically added to box1. When adding them using the data method, there are no custom attributes here. You will see data-student="tom", and you can still use it to get the value "tom". There is not much difference between the two, just the reference method is different. Adding data- in front of the attribute name is the H5 standard way of writing, and it is best to add it.

It should also be noted here that
1. The custom attribute name cannot be the same as the system attribute name, eg: class, name….
2. All attribute values ​​can only be String, whether system or custom
3. Html5 stipulates that when customizing data attributes for an element, the attribute name starts with data-, but the real attribute name does not include data-

The above is the detailed content of How to get and set custom attributes in H5. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template