Kaip naudoti CSS santykines spalvas, kad gautumėte galutinę šešioliktainę spalvą „JavaScript“.

Supratimas, kaip dirbti su CSS santykinėmis spalvomis „JavaScript“.

CSS santykinės spalvos suteikia kūrėjams daugiau stiliaus lankstumo, nes leidžia dinamiškai keisti spalvas pagal jau egzistuojančias spalvų reikšmes. Pavyzdžiui, galbūt norėsite pakeisti spalvos alfa skaidrumą, taip pat jos raudonus ir mėlynus kanalus. Dėl šios technikos skysčių projektavimo sistemos turi daugiau galimybių.

Tačiau dirbti su šiais dinamiškai sugeneruotais „JavaScript“ duomenimis gali būti sunku. Jei bandysite naudoti getComputedStyle kad gautų apskaičiuotą spalvą, ji gali grąžinti neapdorotą eilutę, o ne taisyti jūsų atliktus CSS pakeitimus. Tai apriboja programinį manipuliavimą ir galutinės išvesties spalvos analizę.

Šiame darbe nagrinėjame visos apskaičiuotos šešioliktainės spalvos gavimo iš CSS procesą, neatsižvelgiant į tai, ar ji apibrėžta naudojant sudėtingas CSS santykinės spalvos sintaksė. Mes sprendžiame klausimą, kaip gauti tikslią spalvų reikšmę, kai CSS variklis apskaičiavo santykinius RGB ir alfa kanalų pakeitimus.

Taip pat išnagrinėsime kitas galimas parinktis, pvz., bet kokias trečiųjų šalių bibliotekas arba įtaisytąsias naršyklės API, kurios gali padėti išgauti šią spalvų informaciją tokiu formatu, kuris gali būti naudojamas jūsų „JavaScript“ kode, kad būtų galima toliau keisti.

„JavaScript“: CSS santykinių spalvų naudojimas galutinei šešioliktainei spalvai išgauti

Pirmajame scenarijuje naudojome „JavaScript“, kad gautume ir dirbtume su dinamiškai apskaičiuotomis spalvomis CSS, pasinaudodami naršyklės integruotomis funkcijomis. Pagrindinė problema yra tame, kad CSS santykinės spalvos leidžia reguliuoti kintamą spalvų kanalą, kuris išvestyje nerodomas naudojant įprastesnius metodus, pvz. getComputedStyle. Mes sugalvojame sprendimą, naudodami a drobė elementas. Tikslias RGB reikšmes galime gauti pateikdami apskaičiuotą spalvą ant drobės, kurios matmenys yra 1x1 pikselis. Drobės API galimybė manipuliuoti vaizdo duomenimis pikselių lygiu, įskaitant spalvas, leidžia atlikti šį procesą.

Kiekvieno pikselio RGBA reikšmes išskiria gautiImageData metodas, kai spalva buvo uždėta ant drobės. Toliau, naudojant „JavaScript“ konvertavimą iš skaičių į eilutę ir bitines operacijas, šios reikšmės paverčiamos šešioliktainiu formatu. Čia svarbios instrukcijos, tokios užpildytiRect ir getContext('2d'), yra atsakingi už spalvos generavimą ir piešiamo paviršiaus gamybą. Kai reikalaujame tikslios spalvos, kurią naršyklė pateikia pagal CSS taisyklės, įskaitant visus skaidrumo ar spalvų kanalų koregavimus, šis metodas veikia gerai. Tai puikus būdas išspręsti problemą nenaudojant kitų bibliotekų.

Antruoju metodu supaprastinome manipuliavimą spalvomis naudodami trečiosios šalies įrankį Chroma.js. Spalvas galima lengvai konvertuoti iš vieno formato į kitą naudojant Chroma.js, kuris suteikia abstrakcesnį sąveikos su spalvomis metodą. Chroma.js automatiškai tvarko konvertavimą į šešioliktainį ar kitus formatus, pvz., RGB arba HSL, kai apskaičiuota spalva gaunama iš DOM. Dirbant su projektais, kuriems reikia sudėtingesnių spalvų koregavimo ar formato konvertavimo, šis metodas yra tobulas. Kodas tapo paprastesnis, švaresnis ir lengviau prižiūrimas.

Nors žiūrint iš priešingų perspektyvų, abi strategijos sprendžia tą pačią problemą. Norėdami nustatyti galutinę šešioliktainę spalvą, pirmasis naudoja bitų skaičiavimus ir vietines naršyklės API, o antrasis naudoja specializuoto spalvų manipuliavimo paketo galimybes. Atsižvelgdami į projekto poreikius, galite naudoti Chroma.js, kad padidintumėte lankstumą ir patogumą, arba galite pasirinkti vietinį būdą, kad išvengtumėte priklausomybių pridėjimo. „JavaScript“ leidžia papildomai manipuliuoti gauta šešioliktaine spalva abiejuose scenarijuose, suteikiant dinamiško stiliaus ir spalvomis pagrįstos animacijos galimybių.

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

Pažangūs CSS santykinių spalvų tvarkymo metodai „JavaScript“.

Kintamųjų naudojimas siekiant dinamiškų spalvų modifikacijų yra stipri, bet kartais nepaisoma savybė CSS santykinės spalvos. Pavyzdžiui, galite naudoti „JavaScript“, kad sukurtumėte CSS kintamuosius, vaizduojančius pagrindines spalvas, ir juos keisti realiuoju laiku, įgalindami reaguojančias projektavimo sistemas ir dinamines temas. Šis metodas leidžia keisti ir prižiūrimas spalvų schemas šiuolaikinėse internetinėse programose, kai naudojamas su santykinėmis CSS spalvų funkcijomis.

CSS įvestų objektų modelio (Typed OM) naudojimas yra papildomas būdas išspręsti galutinės apskaičiuotos spalvos gavimo problemą. Dėl Typed OM kūrėjai gali dirbti programiškiau ir sistemingiau su CSS atributais. CSS reikšmes dabar galima pasiekti kaip „JavaScript“ objektus, nes „Typeed OM“ pašalina eilučių metodų poreikį. Santykinės spalvos ir kt sudėtingos CSS transformacijos naudos iš to, nes tai leidžia tiksliau kontroliuoti manipuliavimą nuosavybe.

Galiausiai, jei norite stebėti elementų stilių pokyčius, ypač kai CSS kintamieji arba santykinės spalvų reikšmės keičiamos dinamiškai, pagalvokite apie „JavaScript“ MutationObserver. „MutationObserver“ gali sekti DOM modifikacijas, pvz., elemento eilutinių stilių koregavimus. Galite priversti „JavaScript“ logiką perskaičiuoti spalvą ir atnaujinti ją pagal taikomus stiliaus pakeitimus. Ši technika ypač tinka labai dinamiškoms sąsajoms, kur stilius keičiasi reguliariai, atsižvelgiant į vartotojo ar išorinių šaltinių įvestį.