Comment obtenir uniquement les styles CSS actuellement définis ?

Question

Un modèle non stylisé div possède déjà plusieurs déclarations CSS par défaut. Par exemple :

cursor:auto;
display:block;
float:none;
font-size:16px;

(et plusieurs autres déclarations)

Voir l'exemple ci-dessous :

document.querySelector('.div1').style.padding = '20px';

.div1 {
  background-color: skyblue;
}

<div class="div1" style="border-radius: 5px;">word</div>

Comment puis-je obtenir uniquement les styles qui ont été définis dans la feuille de style et JavaScript, en ignorant toutes les autres déclarations par défaut ?

J'aimerais obtenir le résultat suivant :

background-color: skyblue;
border-radius: 5px;
padding: 20px;

Answer 1

En examinant les style y document.styleSheets nous pouvons trouver les noms de toutes les propriétés CSS qui ont été définies. Ensuite, nous pouvons obtenir les valeurs de ces propriétés à l'aide de la fonction getComputedStyle .

function getAllDefinedStyles(elem) {
  const props = new Set([...elem.style]);
  for (const {cssRules} of document.styleSheets) {
    for (const rule of cssRules) {
      if (elem.matches(rule.selectorText)) {
        for (const prop of rule.style) {
          props.add(prop);
        }
      }
    }
  }
  const computed = getComputedStyle(elem);
  return Object.fromEntries([...props]
      .map(prop => [prop, computed.getPropertyValue(prop)]));
}
console.log(getAllDefinedStyles(document.querySelector('.div1')));

.div1 {
  background-color: skyblue;
  color: red;
}

<div class="div1" style="border-radius: 5px;">word</div>
<script>
  document.querySelector('.div1').style.padding = '20px';
</script>