操作属性的另一种方式
2019-05-10 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 操作属性的另一种方式 </title>
</head>
<body>
对象.属性 的这种方式，只能访问行内的自带属性，无法访问自定义属性
getAttribute：
可以获取行内所有属性，不管是自带还是自定义
但我们一般用来获取自定义属性
获取到的属性的值都是字符串
setAttibute：
可以设置所有的行内属性，不管是自带还是自定义
removeAttribute：
可以删除行内属性，不管是自带还是自定义
自带属性 , 本身存在的属性
自定义属性，它原来没有的属性叫自定义属性
<div class="box" id="add" style="width:100px;" gao="200cm"></div>
<input type="button" value="获取属性" id="get">
<input type="button" value="设置属性" id="set">
<input type="button" value="删除属性" id="remove">
<script>
//找到div
var box = document.getElementsByTagName('div')[0];
// 获取属性 getAttribute：
document.getElementById('get').onclick = function () {
console.log(box.id); //add
console.log(box.style.width); //100px
console.log(box.gao); // undefined ;自定义属性:显示 undefined
// 参数1：属性名
var res1 = box.getAttribute('gao');
var res2 = box.getAttribute('id');
var res3 = box.getAttribute('chang')
console.log(res1, res2, res3); // 200cm "add" null ;空属性(没有这个属性)显示 null;
}
// 设置属性 setAttibute：
document.getElementById('set').onclick = function () {
// 参数1：属性名 ,参数2：属性值
box.setAttribute('gao', '50'); //修改属性(覆盖属性)
box.setAttribute('class', 'xxx'); //修改属性(覆盖属性)
box.setAttribute('age', 18) // 增加自定义属性 : age = 18;
}
// 删除属性 removeAttribute
document.getElementById('remove').onclick = function () {
box.removeAttribute('class'); // 删除 clss 属性
box.removeAttribute('age'); // 删除 age 属性
}
</script>
</body>
</html>
