Kako uporabiti relativne barve CSS za pridobitev končne šestnajstiške barve v JavaScriptu

Razumevanje dela z relativnimi barvami CSS v JavaScriptu

Relativne barve CSS dajejo razvijalcem večjo prilagodljivost oblikovanja, saj jim omogočajo dinamično spreminjanje barv na podlagi že obstoječih barvnih vrednosti. Na primer, morda boste želeli spremeniti prosojnost alfa barve ter njene rdeče in modre kanale. Sistemi tekočega načrtovanja imajo zaradi te tehnike več možnosti.

Delo s temi dinamično ustvarjenimi podatki v JavaScriptu pa je lahko težavno. Če poskusite uporabiti getComputedStyle za pridobitev izračunane barve lahko vrne neobdelan niz, namesto da popravi spremembe CSS, ki ste jih naredili. To omejuje programsko manipulacijo in analizo končne izhodne barve.

V tem delu preučujemo postopek pridobivanja celotne izračunane šestnajstiške barve iz CSS, ne glede na to, ali je definirana s sofisticiranim Relativne barve CSS sintaksa. Ukvarjamo se z vprašanjem, kako pridobiti natančno vrednost barve, potem ko motor CSS izračuna relativne spremembe kanalov RGB in alfa.

Preučili bomo tudi druge možne možnosti, kot so knjižnice tretjih oseb ali vgrajeni API-ji brskalnika, ki vam lahko pomagajo pri ekstrahiranju teh barvnih informacij v formatu, ki ga je mogoče uporabiti v vaši kodi JavaScript za nadaljnje spreminjanje.

JavaScript: uporaba relativnih barv CSS za ekstrahiranje končne šestnajstiške barve

V prvem skriptu smo uporabili JavaScript za pridobivanje in delo z dinamično izračunanimi barvami v CSS z izkoriščanjem vgrajenih funkcij brskalnika. Glavni problem je v tem, da Relativne barve CSS omogoča prilagoditev spremenljivega barvnega kanala, ki ni predstavljen v izpisu pri uporabi bolj običajnih tehnik, kot je getComputedStyle. Najdemo rešitev tako, da uporabimo a platno element. Natančne vrednosti RGB lahko dobimo tako, da izračunano barvo upodabljamo na platno z dimenzijami 1 x 1 slikovnih pik. Zmožnost API-ja za platno, da manipulira s slikovnimi podatki na ravni slikovnih pik, vključno z barvo, omogoča ta postopek.

Vrednosti RGBA vsake slikovne pike ekstrahira getImageData metodo, ko je barva nanesena na platno. Nato se z uporabo pretvorb števila v niz in bitnih operacij v JavaScriptu te vrednosti pretvorijo v šestnajstiško obliko. Tukaj so pomembna navodila, npr fillRect in getContext('2d'), so zadolženi za generiranje barve in izdelavo risljive površine. Ko zahtevamo natančno barvo, ki jo brskalnik upodablja v skladu z CSS pravila—vključno s prilagoditvami prosojnosti ali barvnih kanalov—ta tehnika dobro deluje. To je odličen način za rešitev težave brez uporabe drugih knjižnic.

Pri drugi metodi smo poenostavili barvne manipulacije z uporabo orodja tretje osebe, imenovanega Chroma.js. Z lahkoto je mogoče barve pretvoriti med različnimi formati s Chroma.js, ki zagotavlja bolj abstraktno metodo interakcije z barvami. Chroma.js samodejno obravnava pretvorbo v hex ali druge formate, kot sta RGB ali HSL, ko je izračunana barva pridobljena iz DOM. Pri delu na projektih, ki zahtevajo bolj zapletene prilagoditve barv ali pretvorbe formata, je ta pristop popoln. Posledično je koda preprostejša, čistejša in lažja za vzdrževanje.

Čeprav z nasprotnih perspektiv, se obe strategiji ukvarjata z istim problemom. Za določitev končne šestnajstiške barve prvi uporablja bitne izračune in izvorne API-je brskalnika, medtem ko drugi izkorišča zmogljivosti specializiranega paketa za barvno manipulacijo. Chroma.js lahko uporabite za večjo prilagodljivost in enostavnost uporabe ali pa uporabite izvorni način, da se izognete dodajanju odvisnosti, odvisno od potreb vašega projekta. JavaScript omogoča dodatno manipulacijo pridobljene šestnajstiške barve v obeh scenarijih, kar zagotavlja priložnosti za dinamično oblikovanje in barvne animacije.

// 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();
}

Napredne tehnike za ravnanje z relativnimi barvami CSS v JavaScriptu

Uporaba spremenljivk za doseganje dinamičnih barvnih modifikacij je močna, a včasih zanemarjena lastnost Relativne barve CSS. Na primer, lahko uporabite JavaScript za izdelavo spremenljivk CSS, ki predstavljajo osnovne barve in jih spreminjate v realnem času, kar omogoča odzivne sisteme oblikovanja in dinamične teme. Ta metoda omogoča razširljive in vzdržljive barvne sheme v sodobnih spletnih aplikacijah, kadar se uporabljajo z relativnimi barvnimi funkcijami CSS.

Uporaba CSS Typed Object Model (Typed OM) je dodatna metoda za reševanje težave pri pridobivanju končne izračunane barve. Zahvaljujoč Typed OM lahko razvijalci delajo bolj programsko in sistematično z atributi CSS. Do vrednosti CSS je zdaj mogoče dostopati kot do objektov JavaScript, zahvaljujoč Typed OM, ki odpravlja potrebo po metodah, ki temeljijo na nizih. Relativne barve in drugo zapletene transformacije CSS koristi od tega, saj omogoča natančnejši nadzor nad manipulacijo lastnine.

Nazadnje, če želite slediti spremembam v slogih elementov, zlasti ko se spremenljivke CSS ali relativne barvne vrednosti spreminjajo dinamično, razmislite o uporabi JavaScripta MutationObserver. MutationObserver lahko sledi spremembam DOM, kot so prilagoditve vgrajenih slogov elementa. Nastavite lahko, da vaša logika JavaScript znova izračuna barvo in jo posodobi v skladu z vsemi veljavnimi spremembami sloga. Ta tehnika še posebej dobro deluje pri zelo dinamičnih vmesnikih, kjer se slog spreminja redno kot odgovor na vnose uporabnika ali zunanjih virov.