Maison  >  Article  >  interface Web  >  Comment changer dynamiquement les images clés CSS dans js

Comment changer dynamiquement les images clés CSS dans js

藏色散人
藏色散人original
2023-01-30 09:55:381622parcourir

Méthode JS pour modifier dynamiquement les images clés CSS : 1. Obtenez la feuille de style de lien et la feuille de style introduites sur la page Web via l'interface "document.styleSheets" 2. Insérez un nouveau "@ via "insertRule(rule,index); )" règle des images clés de la méthode".

Comment changer dynamiquement les images clés CSS dans js

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment changer dynamiquement les images clés css avec js ?

js modifie dynamiquement les règles @keyframes en CSS3

Voici une petite démo d'une horloge Le matériel donné est le suivant :
Comment changer dynamiquement les images clés CSS dans js
La direction initiale de la trotteuse est vers. 6 heures. Nous définissons la règle @keyframes pour que la trotteuse tourne d'un cercle

	@keyframes rotate {
		   from{
		   	   transform: rotate(0deg);
		   }
           to{
               transform: rotate(360deg);
           }
	}

Ce réglage peut effectuer une rotation normalement, mais si nous changeons la position initiale de la trotteuse, par exemple en la réglant à 12 heures. 'direction de l'horloge

	transform: rotate(180deg);

alors la règle @keyframes précédente doit être modifiée de 0deg=> ; 360deg est convertie en 180deg=>540deg

Ensuite, le problème se pose. Cette modification n'est pas dynamique Nous ne pouvons pas modifier les règles @keyframes. dans le style à chaque fois
Ici, nous devons utiliser notre js

Passez d'abord le document L'interface .styleSheets obtient la feuille de style de lien et la feuille de style de style introduites sur la page Web

	var style = document.styleSheets[0];

Comment changer dynamiquement les images clés CSS dans js
puis insère une nouvelle règle @keyframes via la méthode insertRule(rule,index)

	var newdeg = 540;
	style.insertRule("@keyframes secondrotate {to{transform: rotate(" + newdeg + "deg);}}",4);

De cette façon, l'effet dont nous avons besoin est obtenu

Comment changer dynamiquement les images clés CSS dans js

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn