Как использовать относительные цвета CSS для получения окончательного шестнадцатеричного цвета в JavaScript

Понимание того, как работать с относительными цветами CSS в JavaScript

Относительные цвета CSS дают разработчикам большую гибкость стилей, позволяя им динамически изменять цвета на основе уже существующих значений цвета. Например, вы можете изменить альфа-прозрачность цвета, а также его красный и синий каналы. Благодаря этому методу системы гибкого проектирования имеют больше возможностей.

Однако работать с этими динамически генерируемыми данными в JavaScript может быть сложно. Если вы попытаетесь использовать getComputedStyle чтобы получить вычисленный цвет, он может вернуть необработанную строку вместо исправления внесенных вами изменений CSS. Это ограничивает программные манипуляции и анализ конечного выходного цвета.

В этой части мы рассмотрим процесс получения полного вычисленного шестнадцатеричного цвета из CSS, независимо от того, определен ли он с помощью сложного метода. Относительные цвета CSS синтаксис. Мы решаем вопрос о том, как получить точное значение цвета после того, как относительные изменения каналов RGB и альфа-каналов были вычислены механизмом CSS.

Мы также рассмотрим другие возможные варианты, такие как любые сторонние библиотеки или встроенные API-интерфейсы браузера, которые могут помочь вам извлечь эту информацию о цвете в формате, который можно использовать в вашем коде JavaScript для дальнейшего изменения.

JavaScript: использование относительных цветов CSS для извлечения окончательного шестнадцатеричного цвета

В первом сценарии мы использовали JavaScript для получения и работы с динамически вычисляемыми цветами в CSS, используя преимущества встроенных функций браузера. Основная проблема заключается в том, что Относительные цвета CSS позволяет настраивать переменный цветовой канал, что не отображается на выходе при использовании более традиционных методов, таких как getComputedStyle. Мы находим обходной путь, используя холст элемент. Мы можем получить точные значения RGB, визуализируя вычисленный цвет на холсте размером 1x1 пиксель. Способность Canvas API манипулировать данными изображения на уровне пикселей, включая цвет, делает этот процесс возможным.

Значения RGBA каждого пикселя извлекаются с помощью getImageData метод после того, как цвет был помещен на холст. Затем, используя преобразования чисел в строки и побитовые операции в JavaScript, эти значения преобразуются в шестнадцатеричный формат. Здесь важные инструкции, такие как fillRect и getContext('2d'), отвечают за генерацию цвета и создание рисуемой поверхности. Когда нам нужен точный цвет, который отображает браузер в соответствии с CSS правил, включая любые настройки прозрачности или цветового канала, этот метод работает хорошо. Это отличный способ решить проблему без использования других библиотек.

Во втором методе мы упростили манипуляции с цветом с помощью стороннего инструмента Chroma.js. Цвета можно легко конвертировать между различными форматами с помощью Chroma.js, который обеспечивает более абстрактный метод взаимодействия с цветами. Chroma.js автоматически выполняет преобразование в шестнадцатеричный или другие форматы, такие как RGB или HSL, после получения вычисленного цвета из DOM. Этот подход идеален при работе над проектами, требующими более сложной настройки цвета или преобразования формата. В результате код становится проще, чище и проще в обслуживании.

Хотя с разных точек зрения обе стратегии решают одну и ту же проблему. Чтобы определить окончательный шестнадцатеричный цвет, первый использует побитовые вычисления и собственные API-интерфейсы браузера, а второй использует возможности специального пакета манипуляции цветом. Вы можете использовать Chroma.js для повышения гибкости и простоты использования или можете использовать собственный способ избежать добавления зависимостей, в зависимости от потребностей вашего проекта. JavaScript позволяет дополнительно манипулировать полученным шестнадцатеричным цветом в обоих сценариях, предоставляя возможности для динамического стиля и анимации на основе цвета.

// 1. First, grab the element whose color you want to extract
const element = document.querySelector('.my-element');

// 2. Use getComputedStyle to get the color property
let computedColor = getComputedStyle(element).color;

// 3. Create a canvas to convert the computed color to hex format
let canvas = document.createElement('canvas');
canvas.width = 1; // Small canvas, just for color conversion
canvas.height = 1;
let ctx = canvas.getContext('2d');

// 4. Set the fill style to the computed color and fill the canvas
ctx.fillStyle = computedColor;
ctx.fillRect(0, 0, 1, 1);

// 5. Extract the color in hex format using getImageData
let pixelData = ctx.getImageData(0, 0, 1, 1).data;
let hexColor = "#" +
  ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2])
    .toString(16)
    .slice(1); // Convert to hex and remove the alpha

console.log(hexColor); // This will log the final hex color value

// 1. First, include Chroma.js in your project (e.g., via CDN or NPM)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js">
const element = document.querySelector('.my-element');

// 2. Retrieve the computed color using getComputedStyle
let computedColor = getComputedStyle(element).color;

// 3. Use Chroma.js to convert the computed color to hex
let chromaColor = chroma(computedColor);
let hexColor = chromaColor.hex();

console.log(hexColor); // Log the final hex color

// Chroma.js also supports other formats such as RGB or HSL
let rgbColor = chromaColor.rgb();
let hslColor = chromaColor.hsl();

console.log(rgbColor); // Logs RGB array
console.log(hslColor); // Logs HSL array

describe('Color Extraction Tests', () => {
  it('should return the correct hex color using canvas', () => {
    let color = getHexColorFromCanvas('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });

  it('should return the correct hex color using Chroma.js', () => {
    let color = getHexColorUsingChroma('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });
});

// Functions used for the tests
function getHexColorFromCanvas(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  let canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = computedColor;
  ctx.fillRect(0, 0, 1, 1);
  let pixelData = ctx.getImageData(0, 0, 1, 1).data;
  return "#" + ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2]).toString(16).slice(1);
}

function getHexColorUsingChroma(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  return chroma(computedColor).hex();
}

Расширенные методы обработки относительных цветов CSS в JavaScript

Использование переменных для достижения динамических изменений цвета — мощная, но иногда игнорируемая особенность Относительные цвета CSS. Например, вы можете использовать JavaScript для создания переменных CSS, которые представляют основные цвета, и изменять их в реальном времени, обеспечивая адаптивные системы дизайна и динамические темы. Этот метод позволяет создавать масштабируемые и поддерживаемые цветовые схемы в современных онлайн-приложениях при использовании с функциями относительного цвета CSS.

Использование CSS Typed Object Model (Typed OM) — дополнительный метод решения вопроса получения итогового вычисляемого цвета. Разработчики могут работать с атрибутами CSS более программно и систематически благодаря Typed OM. Доступ к значениям CSS теперь можно получить как объекты JavaScript благодаря Typed OM, что устраняет необходимость в строковых методах. Родственные цвета и прочее сложные CSS-преобразования извлеките из этого выгоду, поскольку это дает более точный контроль над манипулированием собственностью.

Наконец, если вы хотите отслеживать изменения в стилях элементов, особенно когда переменные CSS или относительные значения цвета изменяются динамически, подумайте об использовании JavaScript. МутацияОбсервер. MutationObserver может отслеживать изменения в DOM, например изменения встроенных стилей элемента. Вы можете заставить свою логику JavaScript пересчитывать цвет и обновлять его в соответствии с любыми применимыми изменениями стиля. Этот метод особенно хорошо работает для высокодинамичных интерфейсов, где изменения стиля происходят регулярно в ответ на входные данные пользователя или внешних источников.