js动态控制伪类样式（通过css变量）

Porco__Rosso

已于 2023-12-08 13:44:37 修改

阅读量555

点赞数

文章标签： javascript css 开发语言

于 2023-12-08 13:41:38 首次发布

本文链接：https://blog.csdn.net/m0_48704438/article/details/134874136

版权

js动态控制伪类样式

简述
代码
- Html
- Css
- Js

简述

在部分场景中，我们通常需要在动态的修改伪类元素的样式，本文通过案例介绍了一个解决方案：
css变量 + js修改具体元素的style对象中的属性

代码

点击链接在codepen中查看效果
https://codepen.io/PorcoRosso/pen/BaMMeNb

Html

<h1 class="title">👋 Hello World!</h1>
<h1 class="title pseudoClass">👋 Hello World!</h1>

Css

:root {
  --bg-color : #000;
  --font-color : #FFF000;
}
.title {
  background-color : var(--bg-color);
  font-size : 4vw;
  color : #FFF
}
.pseudoClass:after {
  content : 'test';
  margin-left : 50px;
  background-color : var(--bg-color);
  color : var(--font-color);
}

Js

/**
 * tips：修改对应元素的style对象属性，不会影响其他元素
 * tips: 该元素（包括其中的伪类）所有使用该变量的样式都会收到影响
 */
var colorArr = ['AAA','BBB','CCC','DDD','EEE','FFF'];
function changeBeforColor(){
  var element = document.querySelector('.pseudoClass');
  var currentTime = new Date();
  var i = currentTime.getSeconds() % 10;
  i = '' + i + i + i;
  var newColor = '#'+i;
  var fontColorIndex = currentTime.getSeconds() % 6;
  var newFontColor = '#'+colorArr[fontColorIndex]+i;
  element.style.setProperty('--bg-color',newColor)
  element.style.setProperty('--font-color',newFontColor)
  setTimeout(()=>{
    changeBeforColor();
  },1000);
}
changeBeforColor()