|
1. 操作内容_innerText、innerHTML
<style>
.box {
width: 100px;
height: 100px;
background-color: blueviolet;
text-align: center;
font: 24px/100px "宋体";
}
</style>
<body>
<div class="box">李沁</div>
<script>
var box = document.querySelector(".box");
box.innerText = "胡莎";
console.log(box);
console.log(box.innerHTML); //胡莎
</script>
</body>
2. 操作属性_固有属性、setAttribute、getAttribute、removeAttribute、style、className、classList
<style>
.box {
width: 100px;
height: 100px;
background-color: blueviolet;
text-align: center;
font: 24px/100px "宋体";
}
.box1 {
width: 50px;
height: 50px;
background-color: cyan;
text-align: center;
font: 12px/50px "微软雅黑";
}
</style>
<body>
<div id="liqin" class="box" style="border: 2px solid #823;">李沁</div>
<script>
var box = document.querySelector(".box");
// 1.固有属性
console.log(box.id); //liqin
console.log(box.style);
console.log(box.className); //box
// 2.setAttribute 设置属性 getAttribute 获取属性名 removeAttribute 移除属性
box.setAttribute("myname", "胡莎");
console.log(box.getAttribute("myname")); //胡莎
box.removeAttribute("myname");
console.log(box.getAttribute("myname")); //null
// 3.操作样式
box.style.backgroundColor = "pink";
// 覆盖式地修改元素的样式（不推荐）
// box.className = "box1";
// 增加样式
box.classList.add("box1");
// 移除样式
box.classList.remove("box");
</script>
</body>
|