La valeur de la propriété raccourcie d'arrière-plan ne se développe pas correctement lors de la tentative d'appel de HTMLElement.style

Question

Dans le style de l'élément, j'ai quelques déclarations CSS en ligne, y compris une déclaration abrégée pour l'arrière-plan

<style>
  :racine{
    --bg-blanc : rgba(255, 255, 255, 0) ;
  }
</style>

<div style="arrière-plan : var(--bg-white); ... "></div>

Mais lors d'une itération sur HTMLElement.style, les propriétés abrégées semblent mal développées

for (déclaration const de Array.from(target.style)) {
   valeur const = target.style.getPropertyValue (déclaration)

   console.log(`${déclaration} : ${valeur}`)
 }
Cela devrait imprimer background-color: var(--bg-white) selon la documentation HTMLElement.style sur MDN, mais j'obtiens background-color : ' '

Propriétés étendues des abréviations. Si vous définissez style="border-top: 1px Solid black", les propriétés normales (border-top-color, border-top-style et border-top-width) sont définies. 

 Quelqu'un a-t-il rencontré cette situation ? 

Answer 1

Problème d'utilisation de l'itérateur par défaut de Array.from(target.style)获取target.style. Il n'inclut pas les propriétés d'arrière-plan. Selon la spécification, les propriétés abrégées ont été étendues à ses différentes parties.

Tout est expliqué dans le code.

Merci à @t.niese pour le conseil dans les commentaires.

<div id="test" style="background: var(--bg-white);">Test</div>

<script>

 const target = document.querySelector('#test');
 
 // style is itarable
 console.log(target.style[Symbol.iterator]);
 
 // but doesn't include background in the iterator
 console.log(...target.style);
 
 // but background is iterable!
 console.log(Object.getOwnPropertyDescriptor(target.style, 'background'));
 
 // we can see it in Object.keys
 console.log(Object.keys(target.style).filter(name => name === 'background'));
 
 // so we can iterate it anyway
 for(const k in target.style){
    if(k === 'background'){
      console.log(target.style[k]);
    }
 }
 
   // Object.entries works too
 console.log(Object.entries(target.style).filter(([name]) => name === 'background'));
 
 // or access directly
 console.log(target.style.getPropertyValue('background'));
 console.log(target.style.background);
 
</script>

Answer 2

Si vous utilisez l'attribut HTMLElement.style，它将返回通过style pour l'appliquer directement (au lieu de le calculer).

Dans ce cas, le navigateur n'a aucun moyen de savoir où se trouve l'instruction background: var(--bg-white); 中的 var(...) 将解析什么并它将包含哪些 background-... 属性（变量的内容将放置在 var(...) et la valeur résultante sera alors analysée.

Donc, si vous avez par exemple --bg-white: content-box Radial-gradient(crimson, skyblue); 那么你的 --bg-white, cela affectera en fait plusieurs propriétés.