码迷,mamicode.com
首页 > 其他好文 > 详细

样式操作案例5-改变box的大小和位置

时间:2019-08-24 17:08:31      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:数字   改变   console   position   oct   pre   inpu   nbsp   必须   

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .cls {
      width: 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);
}

 

样式操作案例5-改变box的大小和位置

标签:数字   改变   console   position   oct   pre   inpu   nbsp   必须   

原文地址:https://www.cnblogs.com/jiumen/p/11405079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!