js控制css变量实现操控伪元素

最新推荐文章于 2022-08-04 15:21:03 发布

二十像三十

最新推荐文章于 2022-08-04 15:21:03 发布

阅读量475

点赞数 1

分类专栏：样式骚操作

本文链接：https://blog.csdn.net/weixin_42676205/article/details/113309047

版权

样式同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

骚操作

3 篇文章 0 订阅

订阅专栏

js控制css变量

开发场景如上图，需要控制蓝色圆点的位置，因为圆点是用伪类写的，所以不好想利用ref属性操作dom那样来操作伪类，于是想到了用js操作css变量，达到同样的效果。

:root {
 --top: -743%
}
.white-bar::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  background-color: #409EFF;
  top:var(--top);
  // top:43%;
  left:-4px;
  border: 1px solid #ffffff;
  border-radius: 50%;
}

css设定一个变量出来，方便js操控，操控方式如下：

document.body.style.setProperty("--top", "77%");

在拿到后台数据后，根据高中低字段来判断小圆点该在哪里显示

优惠劵

二十像三十

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js控制css变量实现操控伪元素

js控制css变量开发场景如上图，需要控制蓝色圆点的位置，因为圆点是用伪类写的，所以不好想利用ref属性操作dom那样来操作伪类，于是想到了用js操作css变量，达到同样的效果。:root { --top: -743%}.white-bar::after { position: absolute; content: ""; width: 14px; height: 14px; background-color: #409EFF; top:var(--top); //
复制链接

扫一扫