<!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>