javascript - 滚动时通过 Javascript 更改 CSS 背景渐变

Question

我正在尝试通过 Javascript 更改渐变的两种背景颜色之一。颜色取决于滚动。不知何故，单一颜色有效但不是渐变。

const [red, green, blue] = [0, 200, 0];
const hasGradient = document.querySelector('.has-gradient');

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150;
  y = y < 1 ? 1 : y
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0));`;
  console.log(`linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0))`)
});

感谢任何输入!

Answer 1

您使用的是 ;在你的字符串中。

  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0));`;

应该:

  hasGradient.style.background = `linear-gradient(rgb(${r}, ${g}, ${b}), rgb(255,0,0))`;

Note: It is not possible to set styles by assigning a string to the style property, e.g. element.style = "color: red;". To set the style of an element, append a "CSS" property to style and specify a value

引用: https://www.w3schools.com/jsref/prop_html_style.asp

演示: https://jsfiddle.net/faod18mL/