Fermer

juin 3, 2021

Comprendre la propriété de style DOM pour créer des styles dynamiques


Dans cet article, nous apprenons à styliser des éléments de manière dynamique en mettant à jour leurs styles en ligne. Nous parlons de la relation entre l'attribut style et la propriété de style DOM, en soulignant que les déclarations CSS incluent des propriétés CSS ainsi que des propriétés CSS personnalisées.

En plus de rendre l'interface utilisateur superbe, les styles sont utilisés pour réduire la charge cognitive nécessaire dans le traitement du contenu d'une application et aussi pour offrir une bonne expérience utilisateur. Par exemple, nous utilisons des styles pour créer une hiérarchie de contenu, pour mettre en évidence des informations importantes et guider l'attention de l'utilisateur.

De plus, de nombreuses applications sont interactives et présentent des données extraites des API. Nous avons donc souvent besoin de styliser dynamiquement les éléments de l'interface utilisateur en fonction de l'interaction de l'utilisateur et des données d'application.

Il existe plusieurs options pour créer des styles dynamiques. Nous pouvons mettre à jour par programmation les styles en ligne d'un élément. Alternativement, nous pouvons ajouter (ou supprimer) des classes aux éléments. Chaque option a ses cas d'utilisation.

Cet article se concentre sur les éléments de style dynamique en mettant à jour leurs styles en ligne. Il est important de connaître la propriété de style DOM et le bloc de déclaration CSS en ligne.

Dans cet article, nous aborderons les blocs de construction suivants :

  1. Relation entre l'attribut de style et la propriété de style DOM.
  2. Différences et les similitudes entre les propriétés CSS et les propriétés CSS personnalisées.

Ce codepen illustre la création de styles dynamiques à l'aide de propriétés CSS personnalisées et est basé sur cet article.

Afin d'étudier ce qui vient nativement avec le navigateur, nous utiliserons JavaScript et HTML vanille.

Attribut HTML style

L'attribut style HTML est utilisé pour déclarer les styles en ligne pour un élément.

La chaîne affectée à l'attribut style contient un [19659014]Bloc de déclaration CSS.

<div style="background-color: prune; "
id="color-demo[1 9459022]"></div>

L'attribut style a la spécificité la plus élevée. Par conséquent, dans notre exemple, la déclaration en ligne background-color remplace la déclaration background-color dans la règle de style avec le sélecteur id :

#color -demo {
  width: 100px; height: 100px;[19659031]background-color: honeydew;
}

DOM style Property

Les éléments d'un document HTML sont représentés comme des objets dans l'objet Document Modèle (DOM). La plupart des attributs HTML, y compris l'attribut style, deviennent des propriétés des objets DOM.

L'attribut style est un attribut global ; par conséquent, tous les objets DOM ont une propriété style.

Comme mentionné précédemment, l'attribut style est utilisé pour déclarer des styles en ligne, donc la propriété style représente le bloc de déclaration CSS en ligne de l'élément.

Déclaration CSS Bloc

Un bloc de déclaration CSS contient des déclarations CSS qui sont des paires de propriétés et de valeurs séparées par des deux-points et terminées par des points-virgules.

Un bloc de déclaration CSS peut avoir des déclarations de propriétés CSS, ainsi que des déclarations de propriétés CSS personnalisées.

]Par exemple, le bloc de déclaration CSS en ligne suivant a une déclaration de propriété CSS personnalisée --primary-color et une déclaration de propriété background-color :

<div[19659017]style="
  --primary-color: papayawhip;
  background-color: var(--couleur primaire);"[19659018]>
</div>

Il n'est donc pas surprenant que la propriété style soit un objet de type CSSStyleDeclaration.

Le L'interface CSSStyleDeclaration expose des propriétés et des méthodes pour interroger et manipuler le bloc de déclaration CSS en ligne.

Nous pouvons classer les propriétés de l'objet de style dans les trois types suivants :

  1. Propriétés CSS intégrées
  2. CSS propriétés personnalisées déclarées en ligne
  3. Propriétés et méthodes pour interroger et manipuler le bloc de déclaration CSS en ligne

Regardons chacune d'entre elles.

Propriétés CSS intégrées

Les propriétés CSS sont les propriétés intégrées fournies par le le navigateur. Nous utilisons les propriétés CSS pour styliser les éléments HTML.

Si nous inspectons un objet DOM, par exemple un HTMLDivElementnous verrons que sa propriété style
a tous les CSS intégrés properties, de alignContent à zoom.

Les valeurs de propriété sont des chaînes vides "" jusqu'à ce qu'une valeur leur soit attribuée dans le bloc de déclaration CSS en ligne.[19659003]Par exemple, déclarer un style en ligne pour background-color: peachpuff; définit le colorEl.style.backgroundColor sur peachpuff.

const colorEl = document.getElementById('color-demo');
console.log(colorEl.style.backgroundColor); 

<div[19659017]style="background-color: peachpuff"
id="color-demo"></div>

Si nous déclarons une règle de style avec padding : 10pxle colorEl.style.padding sera toujours une chaîne vide "" puisque padding n'est pas déclaré dans le bloc de déclaration CSS en ligne.

#color-demo {
padding : 10px;}

const colorEl = document.getElementById([19659082]'démo-couleur');
console.log(colorEl.style.padding);

Propriétés CSS personnalisées déclarées en ligne[19659012]Comme nous l'avons vu précédemment, un bloc de déclaration CSS peut avoir des déclarations de propriétés CSS ainsi que des déclarations de propriétés CSS personnalisées.

Les propriétés CSS personnalisées sont une fonctionnalité relativement nouvelle dans CSS qui permet aux développeurs d'applications de créer des propriétés CSS supplémentaires.

Les deux tirets (--) devant un nom de propriété CSS indiquent une propriété CSS personnalisée. Les propriétés personnalisées CSS sont utilisées pour définir des valeurs auxquelles nous pouvons ensuite accéder dans les déclarations de propriété à l'aide de la fonction var().

Par exemple, si nous voulons créer une forme carrée à l'aide d'un divnous pouvons déclarer une propriété CSS personnalisée appelée --size pour contenir la largeur et la hauteur du div. Accédez ensuite à la valeur dans les déclarations de propriété width et height :

<div style="--size: 100px ;
  largeur: var(--taille);
  hauteur: var[19659018](--size);
  background-color: menthecream"
id=" color-demo"></div>

Le navigateur remplacera le var(--size) fonction avec la valeur contenue dans la propriété --size et définissez les propriétés width et height sur 100px.

Le CSS les propriétés personnalisées déclarées en ligne deviennent les propriétés de la propriété de style de cet élément. Nous pouvons utiliser la méthode style.getPropertyValue() pour vérifier qu'une propriété appelée --size a bien été créée et a une valeur de 100px:[19659079]const colorEl = document.getElementById('color-demo');
console.log(colorEl.style.getPropertyValue('–size')[19659018]);

Tout comme les propriétés CSS intégrées, les propriétés CSS personnalisées sont soumises à la cascade et à l'héritage et peuvent être interrogées ou manipulées lors de l'exécution avec TypeScript/JavaScript.

Propriétés et méthodes d'interrogation et Manipuler le bloc de déclaration CSS en ligne

Comme mentionné précédemment, la propriété style est un objet de type CSSStyleDeclaration qui expose des propriétés et des méthodes qui nous permettent d'interroger et de manipuler dynamiquement les styles en ligne d'un élément.

Veuillez vous référer à la documentation MDN pour une description complète des propriétés et méthodes CSSStyleDeclaration.

Vous trouverez ci-dessous certaines des propriétés et méthodes pratiques :

style. length

Renvoie le nombre de déc de propriété dans le bloc de déclaration CSS en ligne de l'élément.

<div id="color-demo"
  style="[19659019]--size: 100px;  width: var(--size); 
  height: var(--size);
  background-color: blanchedalmond ">
</div>

const colorEl = document. getElementById('color-demo');
console.log(colorEl.style.length);

style.setProperty(propertyName, value, priority)

Permet de modifier le bloc de déclaration CSS en ligne d'un élément.

Jusqu'à présent, dans cet article, nous avons utilisé l'attribut style pour déclarer les styles en ligne au moment du développement.

Nous pouvons créer et mettre à jour des styles en ligne au runtime à l'aide de la méthode setProperty(). C'est-à-dire que nous pouvons modifier les déclarations de propriété existantes ou créer de nouvelles déclarations.

Par exemple, nous pouvons mettre à jour dynamiquement la --size valeur de la propriété CSS personnalisée en fonction de la saisie de l'utilisateur :

< étiquette for="taille">
  <input id="size" type="number" oninput="updateTaille(événement )">
</label>
<div id="demo"></div>

fonction updateSize(taille) { 
  élément const = document.getElementById("demo") ;
  élément.style.setProperty("--size", `${size} px`);
}

Notez que nous devons inclure l'unité (par exemple, px) dans le value.

style.getPropertyValue(propertyName)

Renvoie la valeur de la propriété pour la déclaration de propriété spécifiée dans le bloc de déclaration CSS en ligne.

Nous devons utiliser getPropertyValue() pour obtenir les valeurs des propriétés CSS personnalisées, comme nous l'avons fait dans la section précédente (pour obtenir la valeur de --size).

Pour les propriétés CSS intégrées, nous pouvons simplement utiliser style. pour interroger ou mettre à jour leur valeur, par exemple :

function updateSize(size) {
  const element = document.getEle mentById("démo");
  élément.style.width = `${size}px`[19659018]; élément.style.hauteur = `${taille} px`; console.log(element.style.width)[19659018];
}

De plus, comme nous pouvons le voir, nous pourrions créer des styles dynamiques en mettant à jour les propriétés CSS ou les propriétés CSS personnalisées. Cependant, nous pouvons réutiliser les valeurs des propriétés personnalisées CSS dans plusieurs déclarations, ce qui rend le code plus SEC et plus facile à maintenir.

En remarque, il est important de réitérer que l'attribut style définit les styles en ligne. et, par conséquent, les méthodes de propriété style only interrogent et manipulent le bloc de déclaration de style en ligne de l'élément.

Ainsi, la propriété CSS et les valeurs de propriété CSS Custom déclarées dans les feuilles de style ne sont pas accessible avec la méthode element.style.getPropertyValue().

Pour accéder à ces valeurs, on peut utiliser la méthode getComputedStyle().

<div[19659170]id="demo"></div>

#demo  {
  --size: 100px; width: var(--size)[19659018] ; height: var(--size); background-color: tomate;[19659018]}

élément const = document.getElementById('demo');
console.log(element.style.getPropertyValue('--size')[19659018]); 

const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.getPropertyValue('--size'));[19659336]style.removeProperty(propertyName)

Supprime la propriété spécifiée du bloc de déclaration CSS en ligne et renvoie la valeur de la propriété avant d'être supprimée.


Conclusion


Nous pouvons utiliser un élément style pour manipuler ses styles en ligne et créer des styles dynamiques basés sur l'interaction de l'utilisateur ou des données d'application.


L'attribut de style HTML est représenté dans la propriété de style DOM. La propriété de style elle-même est un objet qui représente le bloc de déclaration CSS en ligne.


 Un bloc de déclaration CSS peut avoir des déclarations pour les propriétés CSS ainsi que des propriétés CSS personnalisées. Les propriétés CSS sont utilisées pour styliser les éléments, tandis que les propriétés CSS personnalisées sont une fonctionnalité CSS plus récente qui nous permet de définir des propriétés CSS personnalisées pour contenir des valeurs pouvant être réutilisées.


 Comme les propriétés CSS, les propriétés CSS personnalisées sont soumises à la cascade et à l'héritage et peut être manipulé dynamiquement.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link