<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { 100px; height: 100px; background-color: pink; } .cls { 200px; height: 200px; position: absolute; top: 100px; left: 100px; background-color: pink; } </style> </head> <body> <input type="button" value=" 点我 " id="btn"> <br> <div id="box"></div> <script src="common.js"></script> <script> my$('btn').onclick = function () { var box = my$('box'); // 改变box的大小和位置 // 使用class // box.className = 'cls'; // // 使用style 设置大小和位置的时候 数字必须带单位 box.style.width = '200px'; box.style.height = '200px'; box.style.position = 'absolute'; box.style.left = '200px'; box.style.top = '200px'; console.log(box.style); } </script> </body> </html>
common中的代码
function my$(id) { return document.getElementById(id); }