Kuidas kasutada CSS-i suhtelisi värve, et saada JavaScripti lõplik kuuskantvärv

JavaScriptis CSS-i suhteliste värvidega töötamise mõistmine

CSS-i suhtelised värvid annavad arendajatele rohkem stiilipaindlikkust, võimaldades neil värve dünaamiliselt muuta olemasolevate värviväärtuste alusel. Näiteks võite soovida muuta nii värvi alfa-läbipaistvust kui ka selle punaseid ja siniseid kanaleid. Selle tehnika tõttu on vedeliku disainisüsteemidel rohkem võimalusi.

Nende dünaamiliselt genereeritud andmetega JavaScriptis töötamine võib aga olla keeruline. Kui proovite kasutada getComputedStyle arvutatud värvi hankimiseks võib see teie tehtud CSS-i muudatuste parandamise asemel tagastada töötlemata stringi. See piirab lõpliku väljundvärvi programmilist manipuleerimist ja analüüsi.

Selles artiklis uurime CSS-ist täieliku arvutatud kuueteistkümnendvärvi saamise protsessi, olenemata sellest, kas see on määratletud keerukate CSS-i suhtelised värvid süntaks. Me tegeleme probleemiga, kuidas saada täpset värviväärtust, kui CSS-mootor on arvutanud RGB- ja alfakanalite suhtelised muudatused.

Uurime ka muid võimalikke valikuid, näiteks mis tahes kolmanda osapoole teeke või sisseehitatud brauseri API-sid, mis aitavad teil seda värviteavet ekstraheerida vormingus, mida saab kasutada JavaScripti koodis, et seda edasi muuta.

JavaScript: CSS-i suhteliste värvide kasutamine lõpliku kuueteistkümnendiku värvi eraldamiseks

Esimeses skriptis kasutasime brauseri sisseehitatud funktsioone kasutades JavaScripti CSS-is dünaamiliselt arvutatud värvide hankimiseks ja nendega töötamiseks. Peamine probleem on selles, et CSS-i suhtelised värvid võimaldab muutuva värvikanali reguleerimist, mida tavapärasemate tehnikate kasutamisel väljundis ei kuvata getComputedStyle. Me töötame välja lahenduse, kasutades a lõuend element. Võime saada täpsed RGB-väärtused, renderdades arvutatud värvi lõuendile, mille mõõtmed on 1x1 pikslit. Lõuendi API võime manipuleerida pildiandmetega pikslite tasemel, sealhulgas värvidega, teeb selle protsessi võimalikuks.

Iga piksli RGBA väärtused eraldab hankigeImageData meetod, kui värv on lõuendile kantud. Järgmisena teisendatakse need väärtused kuueteistkümnendvormingusse, kasutades arvudest stringi teisendusi ja bitipõhiseid toiminguid JavaScriptis. Siin on olulised juhised, näiteks fillRect ja getContext('2d'), vastutavad värvi genereerimise ja joonistatava pinna loomise eest. Kui me nõuame täpset värvi, mida brauser renderdab vastavalt CSS reeglid, sealhulgas kõik läbipaistvuse või värvikanalite kohandused, töötab see tehnika hästi. See on suurepärane meetod probleemi lahendamiseks ilma teisi teeke kasutamata.

Teise meetodi puhul lihtsustasime värvidega manipuleerimist, kasutades kolmanda osapoole tööriista nimega Chroma.js. Värve saab hõlpsasti teisendada erinevate vormingute vahel, kasutades Chroma.js-i, mis pakub värvidega suhtlemiseks abstraktsemat meetodit. Chroma.js tegeleb automaatselt teisendamisega hex- või muudesse vormingutesse, nagu RGB või HSL, kui arvutatud värv on DOM-ist hangitud. Kui töötate projektidega, mis nõuavad keerukamaid värvide kohandamist või vormingu teisendamist, on see lähenemisviis täiuslik. Tänu sellele on kood muutunud lihtsamaks, puhtamaks ja hõlpsamini hooldatavaks.

Ehkki vastupidisest vaatenurgast, tegelevad mõlemad strateegiad sama probleemiga. Lõpliku heksaalvärvi määramiseks kasutab esimene bitipõhiseid arvutusi ja natiivseid brauseri API-sid, samas kui teine ​​kasutab ära spetsiaalse värvitöötluspaketi võimalusi. Sõltuvalt teie projekti vajadustest saate kasutada Chroma.js-i suurema paindlikkuse ja kasutuslihtsuse tagamiseks või kasutada natiivset meetodit, et vältida sõltuvuste lisamist. JavaScript võimaldab mõlemas stsenaariumis allalaaditud hex värvi täiendavat manipuleerimist, pakkudes võimalusi dünaamilisteks stiilideks ja värvipõhisteks animatsioonideks.

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

Täiustatud tehnikad CSS-i suhteliste värvide käsitlemiseks JavaScriptis

Muutujate kasutamine dünaamiliste värvimuutuste saavutamiseks on tugev, kuid mõnikord tähelepanuta jäetud omadus CSS-i suhtelised värvid. Näiteks võite kasutada JavaScripti põhivärve esindavate CSS-i muutujate loomiseks ja nende muutmiseks reaalajas, võimaldades reageerivaid disainisüsteeme ja dünaamilisi teemasid. See meetod võimaldab skaleeritavaid ja hooldatavaid värviskeeme kaasaegsetes võrgurakendustes, kui seda kasutatakse koos CSS-i suhteliste värvifunktsioonidega.

CSS-tüüpi objektimudeli (Typed OM) kasutamine on täiendav meetod lõpliku arvutatud värvi saamise probleemi lahendamiseks. Arendajad saavad tänu Typed OM-ile töötada CSS-i atribuutidega programmilisemalt ja süstemaatilisemalt. CSS-i väärtustele pääseb nüüd juurde JavaScripti objektidena tänu Typed OM-ile, mis välistab vajaduse stringipõhiste meetodite järele. Suhtelised värvid ja muu keerulised CSS-teisendused sellest kasu, kuna see annab täpsema kontrolli varaga manipuleerimise üle.

Lõpuks, kui soovite jälgida elementide stiilide muutusi, eriti kui CSS-i muutujaid või suhtelisi värviväärtusi muudetakse dünaamiliselt, mõelge JavaScripti kasutamisele. MutationObserver. MutationObserver saab jälgida DOM-i muudatusi, näiteks elemendi siseste stiilide kohandusi. Saate panna JavaScripti loogika värvi ümber arvutama ja värskendama seda vastavalt kohaldatavatele stiilimuudatustele. See tehnika töötab eriti hästi väga dünaamiliste liideste puhul, kus stiilimuutused toimuvad regulaarselt vastusena kasutaja või väliste allikate sisenditele.