当前位置：首页 > JavaScript

js实现颜色变换

2026-01-30 21:39:51JavaScript

使用 JavaScript 实现颜色变换

通过修改元素的 `style` 属性

直接修改 DOM 元素的 style 属性可以快速改变颜色。以下示例将元素的背景色从红色变为蓝色：

const element = document.getElementById('target');
element.style.backgroundColor = 'blue';

使用 CSS 类切换

通过添加或移除 CSS 类实现颜色变换，适合需要复用样式的场景。CSS 定义如下：

.color-red { background-color: red; }
.color-blue { background-color: blue; }

JavaScript 切换类名：

const element = document.getElementById('target');
element.classList.remove('color-red');
element.classList.add('color-blue');

使用 `setInterval` 实现渐变效果

通过定时器实现颜色平滑过渡，以下示例实现背景色循环渐变：

const element = document.getElementById('target');
let hue = 0;
setInterval(() => {
  hue = (hue + 1) % 360;
  element.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
}, 50);

使用 `requestAnimationFrame` 优化动画

对于高性能要求的动画，推荐使用 requestAnimationFrame：

const element = document.getElementById('target');
let hue = 0;
function animate() {
  hue = (hue + 1) % 360;
  element.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
  requestAnimationFrame(animate);
}
animate();

通过 Canvas 实现高级颜色处理

使用 Canvas 可以处理像素级颜色操作。以下示例在画布上生成渐变色：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 100);

使用第三方库（如 chroma.js）

对于复杂颜色操作，可使用专业库如 chroma.js：

import chroma from 'chroma-js';
const color = chroma.scale(['red', 'blue']).mode('lch');
document.body.style.backgroundColor = color(0.5).hex();

响应式颜色变换（基于用户输入）

通过事件监听实现交互式颜色变化：

const input = document.getElementById('color-input');
const element = document.getElementById('target');
input.addEventListener('input', (e) => {
  element.style.backgroundColor = e.target.value;
});