Summary of usage methods of data-* attributes in H5

This time I will bring you a summary of how to use the data-* attribute in H5. What are the precautions when using the data-* attribute in H5? Here are practical cases, let’s take a look.

1. About the characteristics of html elements

1. There are some standard characteristics of html elements:

id element The unique identifier in the document;

title Additional explanatory information about the element, usually displayed through the tool tip bar;

lang The language code of the element content, very Rarely used;

dir language direction, rarely used;

className, corresponding to the class attribute of the element, considering the conflict with the ECMAScript reserved word class, so named className;

2. Method of operating attributes:

getAttribute() Gets related attributes, and you can also get customized attributes, which is different from using the attributes of DOM elements;

setAttribute() sets related attributes;

removeAttribute() deletes related attributes;

3. About using getAttribute() and directly using DOM to obtain html element attributes The difference in obtaining the attributes of elements:

For example:

var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

In the example of this article, two methods are demonstrated to obtain the standard characteristics and custom characteristics of html elements. It can be found that:

getAttribute() can access both standard properties and custom properties, but when accessing html element properties using the attributes of the DOM element itself, it can only access standard properties.

Reason:

Only standard attributes in the html element will be added to the DOM object in the form of attributes.

Special case:

There are two types of attributes. Although there are corresponding attribute names in the DOM object, the value of the attribute is different from the value returned by getAttribute() Not the same.

1. Style characteristics:

When using DOM object attributes to access style, an object is returned, while when obtained using the getAttribute() method, css text is returned.

2.Event processingProgram (for example: onclick):

When using the attributes of the DOM object to access, a JavaScript function is returned, and through getAttribute() What is returned when the method is obtained is javas code.

Usage:

Only use the getAttribute() method when obtaining custom attributes. When operating the DOM, use the attributes of the object to obtain them.

2. Custom attributes in Html5

1. The Html5 specification stipulates that custom attributes need to be prefixed with data-, in order to provide information unrelated to rendering.

2. Use the getAttribute() method and setAttribute() method to operate custom attributes.

For example:

var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

The above example shows the use of getAttribute() and setAttribute() methods to operate custom attributes of html elements.

3. Use dataset to operate custom attributes

For example:

var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

The above example shows the use of dataset attributes to operate custom attributes. The value of the dataset attribute is an example of a DOMStringMap, which is a map of name-value pairs. In this mapping, each attribute in the form of data-name has a corresponding attribute. The difference is that there is no data- prefix in the attribute name. (For example, if the custom attribute is data-name, the corresponding attribute in the mapping is name).Another thing to note is that if the data-attribute name contains hyphens (for example: data-date-of-birth ), the corresponding attribute in the mapping is dateOfBirth, which is converted to the corresponding camel case format for display.

4.Compatibility issues with the dataset attribute

Chrome 8 Firefox(Gecko) 6.0 Internet Explorer 11 Opera 11.10 Safari 6

5. Use data-Attribute selector

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

<style>
  p{
    width:100px;
    height:200px;
    margin:20px;
  }
  p[data-name="monster"]{
    background-color: green;
  }
  p[data-name="monster1935"]{
    background-color: red
  }
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么实现JS同步、异步、延迟加载

怎样使用@angular/cli V6.0开发PWA应用

The above is the detailed content of Summary of usage methods of data-* attributes in H5. For more information, please follow other related articles on the PHP Chinese website!