Explication détaillée des étapes de définition des styles d'éléments dans js

Cette fois, je vais vous donner une explication détaillée des étapes de définition des styles d'éléments en js. Quelles sont les précautions pour définir les styles d'éléments en js. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Beaucoup de gens ne savent pas comment définir le style des éléments lors du développement de js. Cet article vous proposera un didacticiel de configuration de js, afin que tout le monde puisse mieux comprendre comment configurer js. intéressé, jetons un oeil ci-dessous.

Lorsque vous voyez ce titre, la première chose à laquelle vous pouvez penser est d'utiliser une routine comme "[element].style.[nom de l'attribut css] = [valeur de l'attribut]" pour définir le style de l'élément, mais en fait, nous avons en fait choisissez d’autres façons de le faire.

Ensuite, je détaillerai trois façons de styliser les éléments.

1. style

C'est en fait une méthode que nous connaissons, par exemple~~

<p id="box"></p>

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

Cette méthode semble simple et grossière, mais la méthode d'écriture est trop lourde, surtout lorsqu'il faut ajouter de nombreux styles. Et il convient de noter que les noms de propriétés CSS utilisant des tirets doivent être convertis en casse chameau. (comme backgroundColor dans l'exemple)

2. style.cssText

Cette méthode est plus concise que la méthode ci-dessus et s'apparente davantage à l'écriture de CSS directement sur l'élément :

[Element].style.cssText = [Style CSS];

Par exemple :

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

En effet, la méthode d’écriture est très pratique.

Cependant, l'inconvénient est que les styles ajoutés ultérieurement de cette manière écraseront les styles précédemment spécifiés via l'attribut style.

C'est le même exemple que ci-dessus, mais écrivez simplement deux morceaux de JS ensemble :

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

Si vous suivez les caractéristiques de la feuille de style en cascade, la couleur de fond rouge définie ci-dessus devrait toujours exister. Cependant, en fait, le style défini ci-dessous via la méthode style.cssText remplacera tous les styles ajoutés via le style (y compris style.cssText). ) méthode. Par conséquent, le résultat final des performances de cet exemple est le même que celui ci-dessus lorsqu'il n'y a qu'une seule phrase

Enfin, veuillez faire attention à la compatibilité avec IE8 et les versions antérieures qui ne prennent pas en charge cssText.

3. insertRule()

Cette utilisation est plus compliquée que les deux méthodes ci-dessus :

[feuille].insertRule([style CSS], position spécifiée)

[sheet] représente une feuille de style, qui peut être obtenue via document.styleSheets. Alors, que sont les document.styleSheets ? Pour faire simple, il fait référence à toutes les feuilles de style appliquées dans le document, y compris les styles introduits via la balise link et les styles définis par la balise style. Si c'est encore un peu difficile à comprendre, donnons un exemple~~

Introduisez d'abord la feuille de style dans l'en-tête :

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

Bien entendu, cette feuille de style doit réellement exister, et cela n’a pas d’importance même si aucun style n’y est écrit. Vous pouvez également utiliser directement la balise de style, et peu importe si le contenu est vide.

Utilisez ensuite JS pour obtenir cette feuille de style :

var sheet = document.styleSheets[0];

Enfin, on peut ajouter des styles à cette feuille de style :

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

La taille est toujours de 200*200 et la couleur d'arrière-plan est verte, ce qui signifie que les styles de largeur et de hauteur définis par style.cssText écrasent les styles définis par insertRule(). La raison est très simple. Les styles définis par style (y compris). style.cssText) appartiennent aux styles Inline qui ont naturellement une priorité plus élevée que le style défini par insertRule()~~

Alors, à quoi fait référence le deuxième paramètre 0 de insertRule() dans l’exemple ?

Il fait référence à l'emplacement où nous devons ajouter du code CSS, donc le paramètre 0 représente le début de la feuille de style.

Par exemple, on ajoute d'abord manuellement un style à la feuille de style (l'exemple suivant n'a rien à voir avec l'exemple ci-dessus) :

<style>
  #box{ width: 100px; height: 100px;}
</style>

var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

Le résultat de l'exécution ci-dessus est une boîte verte d'une largeur et d'une hauteur de 100*100 :

Si vous modifiez le deuxième paramètre dans insertRule() sur 1, alors le code CSS ajouté via JS équivaut à être ajouté derrière #box{ width: 100px; height: 100px;}, semblable à ce qui suit :

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

Il convient également de noter que insertRule() n'est pas compatible avec IE8 et les versions antérieures, mais vous pouvez utiliser addRule() à la place. La syntaxe est légèrement différente. L'exemple ci-dessus est écrit comme ceci :

. Copier le code Le code est le suivant :

	sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);	

第一个参数代表元素，第二个参数代表CSS样式，第三个参数代表插入位置，前两个参数必选，最后一个可选，不填则默认为0。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!