65 lines
1.3 KiB
HTML
65 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
#app {
|
|
width: 300px;
|
|
height: 200px;
|
|
background-color: salmon;
|
|
}
|
|
.box {
|
|
border: solid 5px #ccc;
|
|
color: salmon;
|
|
}
|
|
.box2 {
|
|
font-size: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
被点了怎模板!","我很记仇的这是你点击我的第"+i+"下
|
|
</div>
|
|
|
|
<script>
|
|
|
|
//修改样式
|
|
let app = document.querySelector("#app");//获取dom
|
|
|
|
//2-1直接写行内样式
|
|
// dom.style.样式属性(多单词变驼峰) = "样式属性值"
|
|
// app.style.color="pink";
|
|
// app.style.fontSize="25px";
|
|
// app.style.border="solid 10px #CCC";
|
|
|
|
//2-2修改class
|
|
// app.className = "box box2"; //有缺陷,不好修改, 不建议
|
|
// app.className = "box2 ";
|
|
|
|
//查
|
|
console.log(app.classList);
|
|
|
|
//增
|
|
app.classList.add("box");
|
|
|
|
//删
|
|
app.classList.remove("box");
|
|
|
|
//切换 有就删, 无就增加
|
|
app.classList.toggle("box");
|
|
|
|
|
|
//3.修改属性
|
|
//dom.属性 = "xxxx";
|
|
app.title ="我设置了title";
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |