Kuinka käyttää CSS:n suhteellisia värejä saadaksesi lopullisen hex-värin JavaScriptissä

CSS:n suhteellisten värien käsittelyn ymmärtäminen JavaScriptissä

Suhteelliset CSS-värit antavat kehittäjille enemmän tyylin joustavuutta, koska he voivat muokata värejä dynaamisesti olemassa olevien väriarvojen perusteella. Voit esimerkiksi haluta muokata värin alfaläpinäkyvyyttä sekä sen punaisia ​​ja sinisiä kanavia. Nestesuunnittelujärjestelmillä on enemmän mahdollisuuksia tämän tekniikan ansiosta.

Näiden dynaamisesti luotujen tietojen käsitteleminen JavaScriptissä voi kuitenkin olla vaikeaa. Jos yrität käyttää getComputedStyle lasketun värin palauttamiseksi se voi palauttaa käsittelemättömän merkkijonon tekemiesi CSS-muutosten korjaamisen sijaan. Tämä rajoittaa lopullisen tulosteen värin ohjelmallista käsittelyä ja analysointia.

Tässä artikkelissa tarkastelemme prosessia, jolla saadaan täydellinen laskettu heksadesimaattinen väri CSS:stä riippumatta siitä, onko se määritetty kehittyneellä CSS:n suhteelliset värit syntaksi. Käsittelemme kysymystä siitä, kuinka saada tarkka väriarvo, kun CSS-moottori on laskenut RGB- ja alfa-kanavien suhteelliset muutokset.

Tutkimme myös muita mahdollisia vaihtoehtoja, kuten mahdollisia kolmannen osapuolen kirjastoja tai sisäänrakennettuja selaimen sovellusliittymiä, jotka voivat auttaa sinua poimimaan nämä väritiedot muodossa, jota voidaan käyttää JavaScript-koodissasi muokattavaksi.

JavaScript: Suhteellisten CSS-värien käyttäminen lopullisen heksavärin poimimiseen

Ensimmäisessä skriptissä käytimme JavaScriptiä saadaksemme ja työskennelläksemme dynaamisesti laskettujen värien kanssa CSS:ssä hyödyntämällä selaimen sisäänrakennettuja ominaisuuksia. Suurin ongelma on siinä tosiasiassa CSS:n suhteelliset värit mahdollistaa vaihtelevan värikanavasäädön, jota ei esitetä lähdössä käytettäessä perinteisempiä tekniikoita, kuten getComputedStyle. Suunnittelemme kiertotavan käyttämällä a kangas elementti. Saatamme saada tarkat RGB-arvot renderöimällä lasketun värin kankaalle, jonka mitat ovat 1x1 pikseliä. Canvas API:n kyky käsitellä kuvatietoja pikselitasolla, mukaan lukien värit, tekee tämän prosessin mahdolliseksi.

Kunkin pikselin RGBA-arvot erottaa getImageData menetelmää, kun väri on asetettu kankaalle. Seuraavaksi nämä arvot muunnetaan heksadesimaalimuotoon käyttämällä luvuista merkkijonomuunnoksia ja bittikohtaisia ​​operaatioita JavaScriptissä. Tässä tärkeät ohjeet, mm fillRect ja getContext('2d'), ovat vastuussa värin luomisesta ja piirrettävän pinnan tuottamisesta. Kun vaadimme tarkan värin, jonka selain näyttää CSS säännöt – mukaan lukien mahdolliset läpinäkyvyyden tai värikanavien säädöt – tämä tekniikka toimii hyvin. Se on erinomainen tapa ratkaista ongelma ilman muita kirjastoja.

Toisessa menetelmässä virtaviivaistimme värinkäsittelyä käyttämällä kolmannen osapuolen työkalua nimeltä Chroma.js. Värit voidaan helposti muuntaa eri muotojen välillä Chroma.js:n avulla, joka tarjoaa abstraktimman menetelmän vuorovaikutukseen värien kanssa. Chroma.js käsittelee automaattisesti muunnoksen hex-muotoon tai muihin muotoihin, kuten RGB- tai HSL-muotoon, kun laskettu väri on saatu DOM:sta. Kun työskentelet projekteissa, jotka vaativat monimutkaisempia värisäätöjä tai muotomuunnoksia, tämä lähestymistapa on täydellinen. Tämän seurauksena koodi on yksinkertaisempi, selkeämpi ja helpompi ylläpitää.

Vaikka päinvastaisesta näkökulmasta katsottuna, molemmat strategiat käsittelevät samaa ongelmaa. Lopullisen heksadesimaalivärin määrittämiseksi ensimmäinen käyttää bittikohtaisia ​​laskelmia ja alkuperäisiä selaimen sovellusliittymiä, kun taas toinen hyödyntää erikoistuneen värinkäsittelypaketin ominaisuuksia. Voit käyttää Chroma.js:ää lisätäksesi joustavuutta ja helppokäyttöisyyttä, tai voit valita alkuperäisen tavan välttääksesi riippuvuuksien lisäämistä projektisi tarpeiden mukaan. JavaScript mahdollistaa haetun hex-värin lisäkäsittelyn molemmissa skenaarioissa, mikä tarjoaa mahdollisuuksia dynaamiseen tyyliin ja väripohjaisiin animaatioihin.

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

Kehittyneet tekniikat CSS:n suhteellisten värien käsittelemiseen JavaScriptissä

Muuttujien käyttäminen dynaamisten värimuutosten aikaansaamiseksi on voimakas, mutta joskus huomiotta jätetty ominaisuus CSS:n suhteelliset värit. JavaScriptin avulla voit esimerkiksi rakentaa perusvärejä edustavia CSS-muuttujia ja muuttaa niitä reaaliajassa, mikä mahdollistaa responsiiviset suunnittelujärjestelmät ja dynaamiset teemat. Tämä menetelmä mahdollistaa skaalattavat ja ylläpidettävät väriteemat nykyaikaisissa online-sovelluksissa, kun sitä käytetään CSS:n suhteellisten väritoimintojen kanssa.

CSS-tyyppisen objektimallin (Typed OM) käyttäminen on lisämenetelmä lopullisen lasketun värin saamiseen liittyvän ongelman ratkaisemiseksi. Kehittäjät voivat työskennellä ohjelmallisemmin ja systemaattisemmin CSS-attribuuttien kanssa Typed OM:n ansiosta. CSS-arvoja voidaan nyt käyttää JavaScript-objekteina Typed OM:n ansiosta, mikä eliminoi merkkijonopohjaisten menetelmien tarpeen. Suhteelliset värit ja muut monimutkaiset CSS-muunnokset hyötyä tästä, koska se antaa tarkemman hallinnan omaisuuden manipuloinnille.

Lopuksi, jos haluat seurata muutoksia elementtityyleissä, varsinkin kun CSS-muuttujia tai suhteellisia väriarvoja muutetaan dynaamisesti, harkitse JavaScriptin käyttöä. MutationObserver. MutationObserver voi seurata DOM:iin tehtyjä muutoksia, kuten elementin sisäisten tyylien muutoksia. Voit saada JavaScript-logiikkasi laskemaan värin uudelleen ja päivittämään sen soveltuvien tyylimuutosten mukaisesti. Tämä tekniikka toimii erityisen hyvin erittäin dynaamisissa käyttöliittymissä, joissa tyylimuutoksia tapahtuu säännöllisesti käyttäjän tai ulkoisten lähteiden syötteiden perusteella.