Як використовувати відносні кольори CSS для отримання остаточного шістнадцяткового кольору в JavaScript

Розуміння того, як працювати з відносними кольорами CSS у JavaScript

Відносні кольори CSS надають розробникам більше гнучкості стилів, дозволяючи їм динамічно змінювати кольори на основі попередніх значень кольорів. Наприклад, ви можете змінити альфа-прозорість кольору, а також його червоний і синій канали. Системи рідинного проектування мають більше можливостей завдяки цій техніці.

Однак працювати з цими динамічно згенерованими даними в JavaScript може бути важко. Якщо ви спробуєте використовувати getComputedStyle щоб отримати обчислений колір, він може повернути необроблений рядок замість виправлення внесених вами змін CSS. Це обмежує програмні маніпуляції та аналіз остаточного кольору виведення.

У цьому фрагменті ми розглядаємо процес отримання повного обчисленого шістнадцяткового кольору з CSS, незалежно від того, чи визначено воно за допомогою складної Відносні кольори CSS синтаксис. Ми вирішуємо питання про те, як отримати точне значення кольору після того, як механізм CSS обчислить відносні модифікації RGB і альфа-каналів.

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

JavaScript: використання відносних кольорів CSS для виділення кінцевого шістнадцяткового кольору

У першому сценарії ми використовували JavaScript для отримання та роботи з динамічно обчисленими кольорами в CSS, використовуючи переваги вбудованих функцій браузера. Основна проблема полягає в тому, що Відносні кольори CSS дозволяє налаштовувати змінний колірний канал, який не відображається на виході при використанні більш традиційних методів, як-от getComputedStyle. Ми винайшли обхідний шлях, застосувавши a полотно елемент. Ми можемо отримати точні значення RGB, відтворивши обчислений колір на полотні з розмірами 1x1 піксель. Здатність API canvas маніпулювати даними зображення на рівні пікселів, включаючи колір, робить цей процес можливим.

Значення 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 OM) є додатковим методом вирішення проблеми отримання кінцевого обчисленого кольору. Завдяки Typed OM розробники можуть працювати більш програмно та систематично з атрибутами CSS. Значення CSS тепер можна отримати як об’єкти JavaScript завдяки Typed OM, що усуває потребу в методах на основі рядків. Відносні кольори та інше складні перетворення CSS виграють від цього, оскільки це дає більш точний контроль над маніпулюванням власністю.

Нарешті, якщо ви хочете відстежувати зміни в стилях елементів, особливо коли змінні CSS або відносні значення кольорів змінюються динамічно, подумайте про використання JavaScript MutationObserver. MutationObserver може відстежувати зміни в DOM, наприклад коригування вбудованих стилів елемента. Ви можете змусити свою логіку JavaScript перераховувати колір і оновлювати його відповідно до будь-яких застосовних змін стилю. Ця техніка особливо добре працює для високодинамічних інтерфейсів, де зміна стилю відбувається регулярно у відповідь на вхідні дані від користувача або зовнішніх джерел.