<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//1. 获取元素
var box = document.getElementById('box');
//2. 添加一些默认样式
box.className = 'one';
//3. 给box注册点击事件
box.onclick = function(){
//4. 在事件处理函数中,修改box的位置和背景颜色
box.style.position = 'absolute';
box.style.left = '300px';
box.style.top = '150px';
}
</script>
</body>
</html>
javascript教程系列42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色
最新推荐文章于 2024-06-19 20:30:31 发布