classList 和 cssText 这两个我以前没见过的东西

最新推荐文章于 2021-12-12 20:53:26 发布

weixin_33725722

最新推荐文章于 2021-12-12 20:53:26 发布

阅读量121

点赞数

原文链接：https://juejin.im/post/5cd903f4e51d453c9e540768

版权

classList

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="aa bb">1</div>
<div class="aa bb">2</div>
<div class="aa bb">3</div>
<div class="aa bb">4</div>
<div class="aa bb">5</div>
<div class="aa bb">6</div>
<div class="aa bb">7</div>
<div class="aa bb">8</div>
</body>
</html>

<script>
  Array.from(document.getElementsByClassName('aa')).forEach(p => {
    p.classList.remove('bb');
    console.log(p.classList)
  });
</script>
复制代码

结果:

cssText


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background: #000;
      color: #ffffff;
    }
  </style>
</head>
<body>
<div id="box">1</div>
</body>
</html>

<script>
  document.getElementById('box').style.cssText = `background: #fff; color: #000; font-size: 50px`;
</script>
复制代码