Kako koristiti CSS relativne boje za dobivanje konačne heksadecimalne boje u JavaScriptu

Razumijevanje rada s CSS relativnim bojama u JavaScriptu

CSS relativne boje daju programerima veću fleksibilnost stiliziranja omogućujući im da dinamički mijenjaju boje na temelju već postojećih vrijednosti boja. Na primjer, možda ćete htjeti promijeniti alfa prozirnost boje kao i njene crvene i plave kanale. Sustavi fluidnog dizajna imaju više mogućnosti zbog ove tehnike.

Ipak, rad s ovim dinamički generiranim podacima u JavaScriptu može biti težak. Ako pokušate koristiti getComputedStyle za dohvaćanje izračunate boje, može vratiti neobrađeni niz umjesto popravljanja CSS promjena koje ste napravili. Ovo ograničava programsku manipulaciju i analizu konačne izlazne boje.

U ovom dijelu ispitujemo proces dobivanja kompletne izračunate heksadecimalne boje iz CSS-a, bez obzira je li definirana sofisticiranim CSS relativne boje sintaksa. Bavimo se pitanjem kako dobiti preciznu vrijednost boje nakon što CSS mehanizam izračuna relativne izmjene RGB i alfa kanala.

Također ćemo ispitati druge moguće opcije, kao što su bilo koje biblioteke trećih strana ili ugrađeni API-ji preglednika koji vam mogu pomoći u izdvajanju ovih informacija o boji u formatu koji se može koristiti u vašem JavaScript kodu za daljnje izmjene.

JavaScript: Korištenje CSS relativnih boja za izdvajanje konačne heksadecimalne boje

U prvoj skripti koristili smo JavaScript za dobivanje i rad s dinamički izračunatim bojama u CSS-u koristeći prednosti ugrađenih značajki preglednika. Glavni problem je u činjenici da CSS relativne boje omogućuje promjenjivu prilagodbu kanala boja, koja nije predstavljena u izlazu kada se koriste konvencionalnije tehnike kao što je getComputedStyle. Smišljamo zaobilazno rješenje korištenjem a platno element. Možemo dobiti precizne RGB vrijednosti renderiranjem izračunate boje na platnu dimenzija 1x1 piksela. Sposobnost Canvas API-ja da manipulira slikovnim podacima na razini piksela, uključujući boju, čini ovaj proces mogućim.

RGBA vrijednosti svakog piksela ekstrahiraju se pomoću getImageData nakon što je boja postavljena na platno. Zatim, korištenjem pretvorbi broja u niz i bitovnih operacija u JavaScriptu, te se vrijednosti pretvaraju u heksadecimalni format. Evo, važne upute, kao što su fillRect i getContext('2d'), zaduženi su za generiranje boje i izradu površine koja se može crtati. Kada zahtijevamo točnu boju koju preglednik prikazuje u skladu s CSS pravila—uključujući sve prilagodbe prozirnosti ili kanala boja—ova tehnika dobro funkcionira. To je izvrsna metoda za rješavanje problema bez korištenja drugih biblioteka.

U drugoj metodi pojednostavili smo manipulacije bojama pomoću alata treće strane pod nazivom Chroma.js. S lakoćom se boje mogu pretvoriti između različitih formata pomoću Chroma.js, koji pruža apstraktniju metodu interakcije s bojama. Chroma.js automatski upravlja pretvorbom u hex ili druge formate kao što su RGB ili HSL nakon što se izračunata boja dobije iz DOM-a. Kada radite na projektima koji zahtijevaju složenije prilagodbe boja ili pretvorbe formata, ovaj je pristup savršen. Kao rezultat toga, kod je postao jednostavniji, čišći i lakši za održavanje.

Iako iz suprotnih perspektiva, obje strategije se bave istim problemom. Za određivanje konačne heksadecimalne boje, prvi koristi izračune po bitovima i izvorne API-je preglednika, dok drugi iskorištava mogućnosti specijaliziranog paketa za manipulaciju bojama. Možete koristiti Chroma.js za veću fleksibilnost i jednostavnost upotrebe ili možete koristiti izvorni način da izbjegnete dodavanje ovisnosti, ovisno o potrebama vašeg projekta. JavaScript dopušta dodatnu manipulaciju dohvaćene heksadecimalne boje u oba scenarija, pružajući prilike za dinamički stil i animacije temeljene na boji.

// 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 rukovanje CSS relativnim bojama u JavaScriptu

Korištenje varijabli za postizanje dinamičnih modifikacija boja moćna je, ali ponekad zanemarena značajka CSS relativne boje. Na primjer, možete koristiti JavaScript za izradu CSS varijabli koje predstavljaju osnovne boje i mijenjati ih u stvarnom vremenu, omogućujući responzivne sustave dizajna i dinamičke teme. Ova metoda omogućuje skalabilne sheme boja koje se mogu održavati u suvremenim online aplikacijama kada se koriste s CSS relativnim funkcijama boja.

Korištenje CSS Typed Object Model (Typed OM) dodatna je metoda za rješavanje problema dobivanja konačne izračunate boje. Programeri mogu raditi programski i sustavnije s CSS atributima zahvaljujući Typed OM-u. CSS vrijednostima sada se može pristupiti kao JavaScript objektima zahvaljujući Typed OM-u, koji eliminira potrebu za metodama koje se temelje na stringovima. Relativne boje i drugo složene CSS transformacije imati koristi od toga, jer daje precizniju kontrolu nad manipulacijom imovine.

Na kraju, ako želite pratiti promjene u stilovima elemenata, posebno kada se CSS varijable ili relativne vrijednosti boja mijenjaju dinamički, razmislite o korištenju JavaScript-a MutationObserver. MutationObserver može pratiti izmjene DOM-a, kao što su prilagodbe ugrađenih stilova elementa. Možete natjerati svoju JavaScript logiku da ponovno izračuna boju i ažurira je u skladu sa svim primjenjivim promjenama stila. Ova tehnika posebno dobro funkcionira za vrlo dinamična sučelja, gdje se promjene stila redovito događaju kao odgovor na unose korisnika ili vanjskih izvora.