Ce guide détaille l'objectif et le fonctionnement de la propriété 'style' de l'élément HTML DOM en JavaScript.
Comment fonctionne la propriété 'style' de l'élément HTML DOM en JavaScript ?
Le DOM HTML ' style ” est une propriété en lecture seule qui fonctionne en fonction des propriétés de style allouées en conséquence. En outre, il renvoie le ' Déclaration de style CSS ” qui contient tous les attributs de style en ligne de l'élément HTML particulier.
Note: L'objet 'CSSStyleDeclaration' contient les attributs de style CSS définis dans la section head.
Syntaxe (définir une propriété de style)
élément. style . propriété = valeurSelon la syntaxe ci-dessus, le ' style 'la propriété ne prend en charge qu'un seul paramètre' valeur ” qui représente la valeur de la propriété de style spécifiée.
Syntaxe (Renvoyer une propriété de style)
élément. style . propriétéImplémentons pratiquement les syntaxes décrites ci-dessus de la propriété 'style'.
Exemple 1 : Utiliser la propriété 'style' pour définir la couleur d'un élément HTML particulier
Cet exemple applique la syntaxe de base du ' style ” pour définir la valeur de la propriété “style” de sorte que la couleur de l'élément HTML particulier soit modifiée.
Code HTML
Tout d'abord, parcourez le code HTML donné :
< h2 > Utiliser le style Property en JavaScript h2 >
< identifiant h3 = 'H3' > Deuxième sous-titre. h3 >
Dans les lignes de code ci-dessus :
- Le ' ” La balise HTML spécifie le premier sous-titre.
- Le ' ” crée le deuxième sous-titre du niveau 3 avec un identifiant “H3”.
Code Javascript
Ensuite, suivez le code JavaScript indiqué :
< scénario >document. getElementById ( 'H3' ) . style . couleur = 'vert' ;
scénario >
Dans l'extrait de code ci-dessus, le ' document.getElementById() ” méthode accède à la inclus “ « élément via son identifiant » H3 ' pour définir le ' couleur ” valeur d'attribut de l'élément via le “ style.couleur ' propriété.
Sortir
La sortie montre que la représentation visuelle de l'élément HTML ciblé est définie en conséquence à l'aide de la propriété 'style'.
Exemple 2 : Utiliser la propriété 'style' pour obtenir la valeur de l'attribut 'style' appliqué
Dans cet exemple, la propriété 'style' aide à trouver l'attribut 'style' attribué à l'élément HTML en utilisant sa syntaxe généralisée (Renvoyer une propriété de style).
Code HTML
Le code HTML est indiqué ici :
< h2 > Utiliser le style Property en JavaScript h2 >< identifiant h3 = 'H3' style = 'couleur de fond : orange ;' > La valeur de la couleur d'arrière-plan du deuxième sous-titre est : h3 >
< identifiant h4 = 'démo' > h4 >
Dans ce code :
- Le ' La balise HTML utilise l'attribut 'style' qui définit la couleur d'arrière-plan de l'élément HTML '
'.
- Le ' La balise ' crée un sous-titre vide de niveau 4 ayant un identifiant ' démo ”.
Code Javascript
Maintenant, regardez le code JavaScript donné :
< scénario >constante valeur = document. getElementById ( 'H3' ) . style . Couleur de l'arrière plan ;
document. getElementById ( 'démo' ) . innerHTML = valeur ;
scénario >
Dans le code écrit ci-dessus :
- La variables ' valeur » est déclaré avec un « constante ” mot-clé qui applique le “ document.getElementById() » pour récupérer l'élément «
» en utilisant son identifiant pour obtenir la valeur de l'attribut « style » appliqué et l'appliquer à l'élément, c'est-à-dire «
» via la propriété « style ».
- La méthode 'document.getElementById()' est à nouveau utilisée pour accéder à l'élément vide '
' ajouté et afficher la valeur de l'attribut 'style' alloué par rapport à l'élément HTML récupéré et l'ajouter en tant que sous-titre via le ' innerHTML ' propriété.
Sortir
La sortie applique la couleur d'arrière-plan à l'élément et la valeur de l'attribut set 'style' est également renvoyée en conséquence.
Conclusion
JavaScript utilise le ' style ” pour attribuer et renvoyer les propriétés de “style” en ligne de l'élément HTML DOM. Il nécessite une « valeur » supplémentaire pour appliquer la fonctionnalité souhaitée en conséquence. Outre la définition et la récupération, il est également avantageux de modifier l'attribut 'style' existant. Ce guide a démontré l'objectif principal, le fonctionnement et la mise en œuvre pratique de la propriété de style HTML DOM Element.