<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
border: 1px solid;
}
.p1{
width: 200px;
height: 200px;
border: 3px solid;
}
.p2{
width: 300px;
height: 300px;
background: skyblue;
}
.active{
font-size: 50px;
}
</style>
</head>
<body>
<div id="box">
<div class="d1" name="myD1" data="d">
我是div
</div>
<span></span>
<p class="p1">
p
</p>
<button type="button" onclick="changeFn()">切换</button>
</div>
<script type="text/javascript">
var d1 = document.querySelector(".d1");
var p = document.querySelector("p");
var span = document.querySelector("span");
// d1.outerHTML = "<p>ppp</p>";
// 属性操作
console.log("获取属性:",d1.getAttribute("name"));
// 设置属性
d1.setAttribute("data","dd");
// 删除属性
d1.removeAttribute("data");
// 判断指定属性
console.log(d1.hasAttribute("class"));
// 判断有无属性
console.log(d1.hasAttributes());
// 判断有无属性
console.log(span.hasAttributes());
// 设置或获取样式
console.log(d1.style);
d1.style.border = "1px solid pink";
d1.style["font-size"] = "25px";
d1.style.fontWeight = "700";
/*
操作class名的一个属性和五个方法
*/
// 操作class属性
p.className = "p1 p2";
console.log(p.className);
// 操作class方法
console.log("返回元素的类名:",p.classList);
// 添加类名
p.classList.add("active");
// 指定类名是否存在
console.log(p.classList.contains("active"));
// 返回指定下标所在类名
var classname = p.classList.item(2);
console.log(classname);
// 移除类名
p.classList.remove("p2");
function changeFn(){
p.classList.toggle("active");
}
</script>
</body>
</html>