如何在javascript中添加textshadow的值答案

【问题标题】：how to add values of textshadow in javascript如何在javascript中添加textshadow的值
【发布时间】：2020-06-25 15:36:41
【问题描述】：

我真的想要 Javascript 中的长阴影，但我不想对它们的每一行都进行编码，所以我想自动化它，让它像这样工作：

for (let i = 0; i < length; i++) { 
  document.getElementById("text").style.textShadow = i + "px" + ' ' + i + "px" + ' ' + 0 + ' ' + color
}

问题是它不起作用。我也尝试过使用数组，但没有成功，唯一真正有效的方法是对每一个阴影进行编码，但我想要一个适应性强的解决方案。我该如何尝试并实施它？

【问题讨论】：

这只能使用 CSS 来解决。你使用 JS 有什么原因吗？
您只更新了一个组件（ID 为“text”的组件），并将其阴影设置为：10px 10px 0 #000。第三个值 (0) 是阴影的模糊，为零时您将没有阴影。另外我不确定你为什么将 x/y 偏移量绑定到i 但我想你有一个理由:)
为什么不在 CSS 中为 text 类添加阴影，如果您想控制阴影何时“开启”，您可以通过 JS 添加或删除该类
@pretzelhammer 我正在使用 JS，因为我喜欢 JS，但如果 css 只能工作，我想我会试一试，但感谢所有快速回答:)

标签： javascript html css shadow

【解决方案1】：

您只需要在这里使用一个数组来添加所有影子变量，然后将它们作为逗号分隔的字符串加入，以获得所需的输出，例如：

const color = '#696767';
let shadow = []

for (let i = 0; i < 40; i++) {
  shadow.push(i + "px" + ' ' + i + "px" + ' 0 ' + color)
}

document.getElementById("text").style.textShadow = shadow.join(',')

#text {
  letter-spacing: 0.5rem;
  font-size: 3rem;
  margin-top:0
}

&lt;h1 id="text"&gt; HELLO WORLD &lt;/h1&gt;

【讨论】：