Hur man använder CSS-relativa färger för att få den slutliga hex-färgen i JavaScript

Förstå hur man arbetar med CSS-relativa färger i JavaScript

Relativa CSS-färger ger utvecklare mer stilflexibilitet genom att de gör det möjligt för dem att dynamiskt modifiera färger baserat på redan existerande färgvärden. Du kanske till exempel vill ändra en färgs alfatransparens samt dess röda och blåa kanaler. Vätskedesignsystem har fler möjligheter på grund av denna teknik.

Att arbeta med dessa dynamiskt genererade data i JavaScript kan dock vara svårt. Om du försöker använda getComputedStyle för att hämta en beräknad färg kan den returnera den obearbetade strängen istället för att fixa CSS-ändringarna du gjorde. Detta begränsar den programmatiska manipuleringen och analysen av den slutliga utdatafärgen.

I det här stycket undersöker vi processen att erhålla den fullständiga beräknade hex-färgen från CSS, oavsett om den definieras genom den sofistikerade CSS relativa färger syntax. Vi tar itu med frågan om hur man får det exakta färgvärdet när de relativa ändringarna av RGB- och alfakanalerna har beräknats av CSS-motorn.

Vi kommer också att undersöka andra möjliga alternativ, såsom eventuella tredjepartsbibliotek eller inbyggda webbläsar-API:er som kan hjälpa dig att extrahera denna färginformation i ett format som kan användas i din JavaScript-kod för att ytterligare modifieras.

JavaScript: Använder CSS-relativa färger för att extrahera slutlig hex-färg

I det första skriptet använde vi JavaScript för att få och arbeta med dynamiskt beräknade färger i CSS genom att dra nytta av webbläsarens inbyggda funktioner. Det största problemet ligger i det faktum att CSS relativa färger möjliggör variabel färgkanaljustering, vilket inte är representerat i utdata när man använder mer konventionella tekniker som getComputedStyle. Vi tar fram en lösning genom att använda en duk element. Vi kan få de exakta RGB-värdena genom att återge den beräknade färgen på en duk med dimensionerna 1x1 pixlar. Canvas API:s förmåga att manipulera bilddata på pixelnivå, inklusive färg, gör denna process möjlig.

RGBA-värdena för varje pixel extraheras av getImageData metod när färgen har placerats på duken. Därefter omvandlas dessa värden till ett hexadecimalt format genom att använda tal-till-sträng-konverteringar och bitvisa operationer i JavaScript. Här, de viktiga instruktionerna, såsom fillRect och getContext('2d'), ansvarar för att generera färgen och producera en dragbar yta. När vi kräver den exakta färgen som webbläsaren återger i enlighet med CSS regler – inklusive eventuell transparens eller färgkanaljusteringar – den här tekniken fungerar bra. Det är en utmärkt metod för att lösa problemet utan att använda andra bibliotek.

I den andra metoden strömlinjeformade vi färgmanipulationer genom att använda ett tredjepartsverktyg som heter Chroma.js. Med lätthet kan färger konverteras mellan olika format med Chroma.js, vilket ger en mer abstrakt metod för att interagera med färger. Chroma.js hanterar automatiskt konverteringen till hex eller andra format som RGB eller HSL när den beräknade färgen har hämtats från DOM. När du arbetar med projekt som kräver mer komplicerade färgjusteringar eller formatkonverteringar är detta tillvägagångssätt perfekt. Koden görs enklare, renare och lättare att underhålla som ett resultat.

Även om båda strategierna ur motsatta perspektiv hanterar samma problem. För att bestämma den slutliga hex-färgen använder den första bitvisa beräkningar och inbyggda webbläsar-API:er, medan den andra drar fördel av möjligheterna hos ett specialpaket för färgmanipulation. Du kan använda Chroma.js för ökad flexibilitet och användarvänlighet, eller så kan du gå med det inbyggda sättet att undvika att lägga till beroenden, beroende på behoven i ditt projekt. JavaScript tillåter ytterligare manipulation av den hämtade hex-färgen i båda scenarierna, vilket ger möjligheter till dynamisk styling och färgbaserade animationer.

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

Avancerade tekniker för att hantera CSS-relativa färger i JavaScript

Att använda variabler för att uppnå dynamiska färgmodifieringar är en kraftfull, men ibland bortses från, egenskap hos CSS relativa färger. Du kan till exempel använda JavaScript för att bygga CSS-variabler som representerar grundläggande färger och ändra dem i realtid, vilket möjliggör responsiva designsystem och dynamiska teman. Denna metod gör det möjligt för skalbara och underhållbara färgscheman i moderna onlineapplikationer när de används med CSS-relativa färgfunktioner.

Att använda CSS Typed Object Model (Typed OM) är en ytterligare metod för att lösa problemet med att erhålla den slutliga beräknade färgen. Utvecklare kan arbeta mer programmatiskt och systematiskt med CSS-attribut tack vare Typed OM. CSS-värden kan nu nås som JavaScript-objekt tack vare Typed OM, vilket eliminerar behovet av strängbaserade metoder. Relativa färger och annat komplexa CSS-transformationer dra nytta av detta, eftersom det ger mer exakt kontroll över egendomsmanipulation.

Slutligen, om du vill spåra ändringar i elementstilar, särskilt när CSS-variablerna eller relativa färgvärden ändras dynamiskt, tänk på att använda JavaScripts MutationObserver. MutationObserver kan spåra ändringar av DOM, såsom justeringar av ett elements inline-stilar. Du kan få din JavaScript-logik att räkna om färgen och uppdatera den i enlighet med eventuella tillämpliga stiländringar. Denna teknik fungerar särskilt bra för mycket dynamiska gränssnitt, där stiländringar sker regelbundet som svar på input från användaren eller externa källor.