javascript教程系列42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色

最新推荐文章于 2022-10-17 19:23:42 发布

邢晋宇

最新推荐文章于 2022-10-17 19:23:42 发布

阅读量4.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_36017081/article/details/80398431

版权

JavaScript 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

邢晋宇

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript教程系列42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色

&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .one{ width: 200px;
复制链接

扫一扫