JS 切换dom元素的伪元素样式

最新推荐文章于 2022-10-13 18:08:12 发布

今天也是爱大大的一天吖

最新推荐文章于 2022-10-13 18:08:12 发布

阅读量402

点赞数

分类专栏： JS 文章标签： js css

本文链接：https://blog.csdn.net/qq_45560350/article/details/108227154

版权

JS 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

改class比直接改属性：效率高好维护

.demo1::after{
  content: "";
  width: 50px;
  height: 50px;
  background-color: gold;
  display: inline-block;
}
.demo2::after{
   content: "";
  width: 50px;
  height: 50px;
  background-color: pink;
  display: inline-block;
}
</style>
<body>
<div class="demo1" style="width:100px;height: 100px;background-color: orange;"></div>
<script>
  var div = document.getElementsByTagName('div')[0];
  div.onclick = function(){
    this.className = this.className == 'demo2'?'demo1':'demo2';
  } 
</script>
  </body>