<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM属性获取、设置、删除</title>
<!--
e.getAttribute("id");获取元素e属性id的值，只要是已设置的属性都可以获取
e.setAttribute("id","red");设置元素e属性id的值为red，也可以用来添加新属性
e.removeAttribute("id");删除e元素的id属性
切记：以上方法只对写在行内的属性有效
正确姿势：e.setAttribute("style","color:red;background:grey");//或者id/class/name等；
删除元素的属性同理，但e.removeAttribute("style");//只对行内样式有效
-->
</head>
<body>
<div id="p1" class="pp" align="center" 随便写个属性="随便写个值">我是什么颜色</div>
<script>
var a=document.getElementById("p1");
console.log(a.id);//p1
console.log(a.class);//undefined;无法直接获取class的值
console.log(a.align);//center
console.log(a.随便写个属性);//undefined;无法获取自定义的属性
//e.getAttribute("")
console.log(a.getAttribute("id"));//p1
console.log(a.getAttribute("class"));//pp
console.log(a.getAttribute("随便写个属性"));//随便写个值
//e.setAttribute("属性","值")
a.setAttribute("随便写个属性","我重新设置了一个属性");//页面中：随便写个属性="我重新设置了一个属性"
a.setAttribute("style","background: red;font-style: italic;");//给元素a设置属性background-color,值为red
//e.removeAttribute("要删除的属性")
a.removeAttribute("align");//删除了元素a的align属性
</script>
</body>
</html>
