读取元素属性值
- 元素对象.属性名
- 元素对象.getAttribute(‘属性名’)
两者区别:
方法1 只能读取自带属性,不能读取自定义属性
方法2 自带、自定义属性 都可以读取
一般,读取自带属性就用 传统的方法1;
读取自定义属性用 方法2
H5中自定义属性一般加上前缀“data-”,例如“data-index”
获取data-开头的自定义属性还可以用- - -元素对象.dataset.除前缀的后面名,eg: 元素对象.dataset.index
如果自定义属性名较长,如这种:data-fruit-name=“orange”,dataset获取时要使用驼峰法,eg:元素对象.dataset.fruitName
没有以data-开头的不能用dataset获取到
元素对象.dataset- - -里面包含了该对象所有以data-开头的属性
获取自定义属性一般还是常用- - -getAttribute()
修改元素属性值
- 元素对象.属性名 = 属性值
- 元素对象.setAttribute(‘属性名’, 属性值)
自带属性用 方法1 修改
自定义属性用 方法2 修改 (也可以改自带属性)
删除元素属性
元素对象.removeAttribute(‘属性名’)
使用示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性先关操作</title>
<style>
.box {
width: 300px;
height: 100px;
margin: 100px auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="box" id="demo" index="2">
属性- - -自带属性、自定义属性
</div>
<script>
// 获取元素对象
var div = document.querySelector('.box');
// 读取元素属性值
console.log(div.id);
console.log(div.index);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
// 修改元素属性值
div.id = 'intro';
console.log(div.id);
div.setAttribute('index', 3);
console.log(div.getAttribute('index'));
div.setAttribute('id', 'introduce');
console.log(div.id);
// 删除属性
div.removeAttribute('index');
</script>
</body>
</html>
打印结果: