1.❤️❤️前言~🥳🎉🎉🎉
2.Dom简介
3.获取元素
4.事件基础
5.innerText和innerhtml
6.修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Style Operation Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 20px auto;
padding: 10px;
text-align: center;
}
.box2 {
width: 200px;
height: 200px;
/* 颜色改变 */
background-color: #ffcc00;
border-color: #e6b800;
/* 字体大小由 默认 变为 24px */
font-size: 24px;
/* 旋转样式 */
transform: rotate(20deg);
border: 1px solid #ccc;
margin: 20px auto;
padding: 10px;
text-align: center;
}
button {
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="myBox" class="box">盒子模型元素</div>
<br>
<button id="changeButton">修改 style 属性</button>
<script>
// JavaScript 脚本
// 获取按钮元素
var changeButton = document.getElementById('changeButton');
// 添加点击事件监听器
changeButton.addEventListener('click', function() {
var box = document.getElementById('myBox');
// 切换类名以改变样式
box.className = "box2";
});
</script>
</body>
</html>