终止和终极获取

游鹄君2025年4月30日小于 1 分钟

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>终止和终极获取</title>
  <style type="text/css">
  *{
    margin:0px;
    padding:0px;
  }
  
  #big
  {
    width:400px;
    height:400px;
    position:absolute;
    background:#C81623;
 
  }
  #small
  {
    width:200px;
    height:200px;
    position:absolute;
    left:30px;
    top:30px;
    background:orange;
  }
  </style>
</head>
<body>
  <div id='big'>
    <div id='small' style="background:yellow"></div>
  </div>
  <script type="text/javascript">
  var divs=document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    
    divs[i].onclick=function(e)
    {
     this.style.background='purple';
     //消除扩散
     e.stopPropagation();
    }
  }
  //终极获取
  var small = document.getElementById('small');
  var ds = window.getComputedStyle(small);
 
  console.log(ds.width);
  console.log(ds.height);
  console.log(ds.backgroundColor);
 
  </script>
</body>
</html>