Jak używać kolorów względnych CSS, aby uzyskać ostateczny kolor szesnastkowy w JavaScript

Zrozumienie, jak pracować z kolorami względnymi CSS w JavaScript

Kolory względne CSS zapewniają programistom większą elastyczność stylizacji, umożliwiając im dynamiczną modyfikację kolorów w oparciu o wcześniej istniejące wartości kolorów. Na przykład możesz chcieć zmodyfikować przezroczystość alfa koloru, a także jego kanały czerwony i niebieski. Systemy projektowania płynów mają więcej możliwości dzięki tej technice.

Praca z dynamicznie generowanymi danymi w JavaScript może być jednak trudna. Jeśli spróbujesz użyć getComputedStyle aby pobrać obliczony kolor, może zwrócić nieprzetworzony ciąg znaków, zamiast naprawiać wprowadzone zmiany CSS. Ogranicza to programową manipulację i analizę końcowego koloru wyjściowego.

W tym artykule badamy proces uzyskiwania pełnego obliczonego koloru szesnastkowego z CSS, niezależnie od tego, czy jest on zdefiniowany za pomocą wyrafinowanego Kolory względne CSS składnia. Zajmujemy się kwestią uzyskania dokładnej wartości koloru po obliczeniu względnych modyfikacji kanałów RGB i alfa przez silnik CSS.

Przeanalizujemy również inne możliwe opcje, takie jak biblioteki stron trzecich lub wbudowane interfejsy API przeglądarki, które mogą pomóc w wyodrębnieniu informacji o kolorach w formacie, który można wykorzystać w kodzie JavaScript w celu dalszej modyfikacji.

JavaScript: wykorzystanie kolorów względnych CSS w celu wyodrębnienia końcowego koloru szesnastkowego

W pierwszym skrypcie użyliśmy JavaScript, aby uzyskać i pracować z dynamicznie obliczanymi kolorami w CSS, korzystając z wbudowanych funkcji przeglądarki. Główny problem polega na tym, że Kolory względne CSS umożliwia zmienną regulację kanału kolorów, która nie jest odzwierciedlana na wydruku w przypadku stosowania bardziej konwencjonalnych technik, takich jak getComputedStyle. Obmyślamy obejście, stosując płótno element. Dokładne wartości RGB możemy uzyskać renderując obliczony kolor na płótnie o wymiarach 1x1 pikseli. Możliwość manipulowania danymi obrazu na poziomie pikseli, w tym kolorem, umożliwia interfejs API canvas.

Wartości RGBA każdego piksela są wyodrębniane przez pobierzImageData metoda po nałożeniu koloru na płótno. Następnie, wykorzystując konwersję liczby na ciąg i operacje bitowe w JavaScript, wartości te są przekształcane do formatu szesnastkowego. Tutaj ważne instrukcje, takie jak wypełnienieProst I getContext('2d'), odpowiadają za generowanie koloru i tworzenie powierzchni do rysowania. Gdy wymagamy dokładnego koloru renderowanego przez przeglądarkę zgodnie z CSS reguły — w tym wszelkie dostosowania przezroczystości i kanałów kolorów — ta technika sprawdza się dobrze. Jest to doskonała metoda rozwiązania problemu bez korzystania z innych bibliotek.

W drugiej metodzie usprawniliśmy manipulację kolorami, korzystając z narzędzia innej firmy o nazwie Chroma.js. Kolory można z łatwością konwertować pomiędzy różnymi formatami za pomocą Chroma.js, który zapewnia bardziej abstrakcyjną metodę interakcji z kolorami. Chroma.js automatycznie obsługuje konwersję do formatu szesnastkowego lub innego formatu, takiego jak RGB lub HSL, po pobraniu obliczonego koloru z DOM. Podczas pracy nad projektami wymagającymi bardziej skomplikowanych dostosowań kolorów lub konwersji formatów, to podejście jest idealne. Dzięki temu kod staje się prostszy, czystszy i łatwiejszy w utrzymaniu.

Choć z przeciwnej perspektywy, obie strategie dotyczą tego samego problemu. Aby określić ostateczny kolor szesnastkowy, pierwszy wykorzystuje obliczenia bitowe i natywne interfejsy API przeglądarki, podczas gdy drugi wykorzystuje możliwości specjalistycznego pakietu do manipulacji kolorami. Możesz użyć Chroma.js, aby zwiększyć elastyczność i łatwość użycia, lub możesz skorzystać z natywnego sposobu, aby uniknąć dodawania zależności, w zależności od potrzeb Twojego projektu. JavaScript pozwala na dodatkową manipulację pobranym kolorem szesnastkowym w obu scenariuszach, zapewniając możliwości dynamicznej stylizacji i animacji opartych na kolorach.

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

Zaawansowane techniki obsługi kolorów względnych CSS w JavaScript

Używanie zmiennych w celu uzyskania dynamicznych modyfikacji kolorów jest potężną, ale czasami lekceważoną cechą Kolory względne CSS. Możesz na przykład użyć JavaScriptu do zbudowania zmiennych CSS reprezentujących podstawowe kolory i zmiany ich w czasie rzeczywistym, umożliwiając responsywne systemy projektowania i dynamiczne motywy. Ta metoda umożliwia skalowalne i łatwe w utrzymaniu schematy kolorów we współczesnych aplikacjach internetowych, gdy są używane z funkcjami kolorów względnych CSS.

Korzystanie z typowego modelu obiektowego CSS (Typed OM) to dodatkowa metoda rozwiązania problemu uzyskania ostatecznego obliczonego koloru. Programiści mogą pracować bardziej programowo i systematycznie z atrybutami CSS dzięki Typed OM. Dostęp do wartości CSS można teraz uzyskać jako obiekty JavaScript dzięki Typed OM, który eliminuje potrzebę stosowania metod opartych na ciągach znaków. Kolory względne i inne złożone transformacje CSS korzyści z tego, ponieważ daje bardziej precyzyjną kontrolę nad manipulacją właściwościami.

Na koniec, jeśli chcesz śledzić zmiany w stylach elementów, zwłaszcza gdy zmienne CSS lub względne wartości kolorów zmieniają się dynamicznie, pomyśl o wykorzystaniu JavaScript Obserwator Mutacji. MutationObserver może śledzić modyfikacje DOM, takie jak poprawki w stylach wbudowanych elementu. Możesz sprawić, że logika JavaScript przeliczy kolor i zaktualizuje go zgodnie z obowiązującymi zmianami stylu. Technika ta sprawdza się szczególnie dobrze w przypadku bardzo dynamicznych interfejsów, w których zmiany stylu zachodzą regularnie w odpowiedzi na dane wejściowe użytkownika lub źródła zewnętrzne.