Attribute属性的操作

HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）

元素节点提供四个方法，用来操作属性

• getAttribute()
• setAttribute()
• hasAttribute()
• removeAttribute()

Element.getAttribute()

Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null

xxxxxxxxxx
// HTML代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"

Element.setAttribute()

Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性

xxxxxxxxxx
var d = document.getElementById('d1');
d.setAttribute('align', 'center');

下面是对img元素的src属性赋值的例子

xxxxxxxxxx
var myImage = document.querySelector('img');
myImage.setAttribute('src', 'images/girl.png');

Element.hasAttribute()

Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性

xxxxxxxxxx
var d = document.getElementById('box');

if (d.hasAttribute('align')) {
  d.setAttribute('align', 'center');
}

Element.removeAttribute()

Element.removeAttribute方法用于从当前元素节点移除属性

xxxxxxxxxx
// HTML 代码为
// <div id="box" align="left" width="200px">
document.getElementById('box').removeAttribute('align');
// 现在的HTML代码为
// <div id="box" width="200px">

dataset 属性

有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性

使用标准提供的data-*属性

xxxxxxxxxx
<div id="box" data-itbaizhan="itbaizhan">

然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作 HTML 元素标签的data-*属性

xxxxxxxxxx
var n = document.getElementById('box');
n.dataset.itbaizhan // itbaizhan
n.dataset.itbaizhan = 'itbaizhan'

实时效果反馈

1. 下列关于自定义属性，属于JavaScript标准的写法是：

A attr-*

B data-*

C setAttr-*

D getAttr-*

答案

1=>B