javascript - 使用线性渐变更改 h1 标签的文本颜色

Question

我正在尝试使用线性渐变更改 h1 标签文本的颜色。

document.querySelectorAll('.hud-intro h1')[0].style.color = 'linear-gradient(to right, #7f00ff, #e100ff);'
document.querySelectorAll('.hud-intro h1')[0].style.background = 'linear-gradient(to right, #7f00ff, #e100ff);'

<div id="hud-intro" class="hud-intro">
  <h1>NAME HERE<small>.io</small></h1>
</div>

我试过了:

document.querySelectorAll('.hud-intro h1')[0].style.color = 'linear-gradient(to right, #7f00ff, #e100ff);'
document.querySelectorAll('.hud-intro h1')[0].style.background = 'linear-gradient(to right, #7f00ff, #e100ff);'

Answer 1

线性渐变仅适用于背景，因此颜色规则不起作用。但问题是您的代码中有一个不需要的分号:

document.querySelectorAll('.hud-intro h1')[0].style.background = 'linear-gradient(to right, #7f00ff, #e100ff)'

<div id="hud-intro" class="hud-intro">
  <h1>NAME HERE<small>.io</small></h1>
</div>

来自 MDN :

Because <gradient>s belong to the <image> data type, they can only beused where <image>s can be used. For this reason, linear-gradient()won't work on background-color and other properties that use the<color> data type.