[Résolu] Elem.style.backgroundColor ne retourne que du RGB !

Question

Gill

28 Dec 2019 à 02:34

Je dois naviguer entre les formats de couleur HEX, RGB et HSL.
Je "sauvegarde" donc ma couleur dans le DOM au bon format (HEX).
... mais je la récupère au format RGB !!!
POURQUOI ?
Et surtout : comment faire pour obtenir le format enregistré tel qu'il est ?
(sachant que c'est le bon format qui est en mémoire, dans le tag, dans les styles...)

<div style="background-color: #ffff00"></div>

div = document.querySelector('div');
div.innerHTML = div.style.backgroundColor;

Résultat affiché : rgb(255, 255, 0) (au lieu de #ffff00")
CodePen
Modifié par Gill (28 Dec 2019 - 19:06)

Gill

28 Dec 2019 à 13:19

Effet de bord amusant : mais pourquoi je m'embête à trouver un code compliqué pour transformer ma couleur en RGB, alors qu'il suffit de laisser faire le DOM ?

<div style="background-color: #ffff00"></div>

div = document.querySelector('div');
//div.innerHTML = div.style.backgroundColor;
//div.innerHTML = div.style['background-color'];
//div.innerHTML = window.getComputedStyle( div ,null).getPropertyValue('background-color');

function hexOrHslToRgb(color){
  let elem = document.createElement('div');
  document.body.appendChild(elem);
  elem.style.color = color;
  const rgbColor = elem.style.color;//  * soupir *
  document.body.removeChild(elem);
  return rgbColor;
}
div.innerHTML = hexOrHslToRgb('hsl(300,50%,20%)');
div.innerHTML += ' - '+hexOrHslToRgb('#ffff00');

résultat affiché : rgb(77, 25, 77) - rgb(255, 255, 0)
Modifié par Gill (28 Dec 2019 - 13:24)

Gill

28 Dec 2019 à 18:02

J'ai trouvé ! Smiley biggrin

J'ai cherché partout sur le net, et aucune réponse parmi les nombreux programmeurs qui se posaient la même question que moi.
Alors j'ai fouillé dans les propriétés des tags... et j'ai trouvé l'UNIQUE endroit où la couleur présente dans le <div style="background-color: #ffff00 "> était préservée telle quelle :

div.outerHTML ! Smiley biggol

Alors, c'est pas très propre et ça ne correspond qu'au cas très précis qui me concerne (style temporaire dans le tag, utilisé quelques temps, puis sauvé dans la feuille de style à la fin), mais ça marche :

<div id="div1" style="background-color: #ffff00">
  <div style="background-color: red"></div>
</div>
<!--
<div id="div1" style="background-color: rgb(255, 255, 0)"></div>
<div id="div1" style="background-color: hsl(60, 100%, 50%)"></div>
<div id="div1" style="background-color: yellow"></div>
-->


function realBkgColor(elem){
  let outer = elem.outerHTML.replace(/\s/g,'');
  let tag = outer.split('<'+elem.tagName).pop().split('>')[0];
  let style = tag.split('style="').pop().split('"')[0]'';
  let color = style.split('background-color:').pop().split(';')[0]'';
  return color;
}
div = document.getElementById('div1');
div.innerHTML = realBkgColor(div);

Résultat affiché : #ffff00
C'est à dire ce qu'on a réellement dans le tag. Et pas ce fichu rgb(255, 255, 0) !
Essayez avec les autres formats de couleur : ça marche Smiley cligne

CodePen

Bon... il y aurait quelques difficultés pour color:#ffff00 , avec le code ci-dessus, mais moi j'utilise mon parser CSS perso, donc...
Modifié par Gill (28 Dec 2019 - 20:06)

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Elem.style.backgroundColor ne retourne que du RGB !