体验事件三要素代码02

游鹄君2025年4月30日小于 1 分钟
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件三要素02</title>
  <style type="text/css">
    *
    {
     margin:0px;
     padding:0px;
    }
  </style>
</head>                      
<body>
  
  <table width=800 border='1' >
    <tr align='center'>
    <!-- 更改属性时第一种添加单击事件方法 -->
    <td><div id='dv1' onclick='clk(this)'></div></td>
    <!-- 更改属性时第二种添加单击事件方法 -->
    <td><div id='dv2' ></div></td>   
    </tr>
  </table>
 
  <script type="text/javascript">
  //01注意可以直接用js给div添加行内样式
  //获取对象
  var dv1=document.getElementById('dv1');
  //添加样式
  dv1.style.width='300px';
  dv1.style.height='300px';
  //还是要注意 驼峰命名法 去掉-
  dv1.style.backgroundColor='lightblue';
  dv1.style.border='dashed 5px orange';
  
 
  //02添加单击事件
  function clk(obj)
  {
    obj.style.borderRadius='50%';
  }
 
 
  var dv2=document.getElementById('dv2');
  dv2.style.width='300px';
  dv2.style.height='300px';
  dv2.style.backgroundColor='lightyellow';
  dv2.style.border='dashed 5px red';
    
  //03添加单击事件的第二种方法
  dv2.onclick=function()
  {
    //这里用div和this是一样的
    dv2.style.borderRadius="30%";
  }
 
 
  </script>
</body>
</html>