如何在CSS中使用JavaScript变量？打字机效果steps匹配问题求助

问题 #

我制作了一个带有简易打字机效果的网站，希望动画的steps()参数能和当前显示单词的字母数完全一致。尝试在CSS中使用JavaScript定义的变量，但无法生效，请问该如何解决？

原代码问题分析 #

你之前定义的Steps是JavaScript局部变量，和CSS中的--Steps自定义属性没有任何关联，CSS无法直接读取JS的局部变量，这就是变量不生效的核心原因。

解决方案 #

要让CSS能获取到JS计算的单词长度，需要通过element.style.setProperty()方法，把数值注入到目标元素的CSS自定义属性中，同时给CSS变量设置默认值避免初始状态出错。

修改后的JavaScript代码

const text = document.getElementById("second-text");

const textLoad = () => {
    setTimeout(() => {
          text.textContent = "Freelancer";
          // 将单词长度设置为元素的CSS自定义变量
          text.style.setProperty('--Steps', 10);
    }, 0); 
    setTimeout(() => {
        text.textContent = "Editor";
        text.style.setProperty('--Steps', 6);
    }, 4000); 
    setTimeout(() => {
        text.textContent = "Coder";
        text.style.setProperty('--Steps', 5);
    }, 8000);
}

textLoad(); 
setInterval(textLoad, 12000);

修改后的CSS代码

body {
  background: black;
  margin: 0;
  padding: 0;
  font-family: "Poppins";
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100%;
}

.container {
  width: 300px;
  overflow: hidden;
}

.container .text {
  position: relative;
  color: white;
  font-size: 30px;
  font-weight: 600;
  align-items: start;
}

.container .first-text {
  color: white;
}

/* 给目标元素设置初始CSS变量值，对应第一个单词的长度 */
.container .second-text {
  --Steps: 10;
}

.container .second-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  border-left: 2px solid #4070f4;
  /* 使用CSS变量，同时设置默认值防止出错 */
  animation: animate 4s steps(var(--Steps, 10)) infinite;
}

@keyframes animate {
  0% {
    left: 0%;
  }
  40%,
  60% {
    left: calc(100% + 4px);
  }
  100% {
    left: 0%;
  }
}

HTML代码（无需修改）

<div class="container">
  <span class="text first-text">Hi! I am </span>
  <span class="text second-text" id="second-text">Freelancer</span>
</div>

补充优化 #

如果不想手动写每个单词的长度，可以通过text.textContent.length自动获取，减少硬编码：

// 以第一个定时器为例
setTimeout(() => {
  const word = "Freelancer";
  text.textContent = word;
  text.style.setProperty('--Steps', word.length);
}, 0);

这样后续添加新单词时，不需要手动计算长度，更灵活。

内容的提问来源于stack exchange，提问作者JoyBrar2003