Pobieranie koloru z css za pomocą getComputedStyle()

Question

Hej, potrzebuję pobrać wartość koloru z css w javascript. "Problem" polega na tym, że zamiast nazwy koloru lub jej zapisu szesnastkowego, pobiera mi rgb. Czy jest jakaś możliwość pobrania dokładnej wartości, jaka jest zapisana w pliku, czy trzeba koniecznie konwertować?

Comments

Wydaje mi się że jedynym rozwiązaniem będzie konwersja, niemniej jednak w jakim celu chcesz koniecznie mieć kod HEX lub nazwę koloru?

---

Chcę wypisać kolor na stronie.

Answer 1

Gdyby kolor był zapisany jako styl inline, wówczas mógłbyś pobrać zawartość atrybutu [style] i z niego wyciągnąć. Jeśli jednak jest w zewnętrznym arkuszu, to zaczyna się robić mniej ciekawie.

Na szczęście wartości w RGB można łatwo pociachać regexem i w miarę prosty sposób przekształcić na liczby szesnastkowe. Coś typu:

console.log( convertToHex( 'rgb( 255, 0, 24 )' ) );

function convertToHex( rgbValue ) {
	const rgbRegex = /^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)/i;
	const values = rgbValue.match( rgbRegex ).slice( 1 );

	return values.reduce( ( hexString, element ) => {
		const hex = Number( element ).toString( 16 ).padStart( 2, '0' );
		
		return `${ hexString }${ hex }`;
	}, '#' );
}

Ogólnie możesz sobie zobaczyć, jak robimy konwersję w CKE4.

Comments

Dziękuję za pomoc!