Css utilise l'expression js pour réaliser l'échange d'effets_Experience

IE5 et les versions ultérieures prennent en charge l'utilisation d'expressions en CSS pour associer des propriétés CSS à des expressions Javascript. Les propriétés CSS peuvent ici être des propriétés inhérentes à l'élément ou des propriétés personnalisées. C'est-à-dire que l'attribut CSS peut être suivi d'une expression Javascript et que la valeur de l'attribut CSS est égale au résultat du calcul de l'expression Javascript. Vous pouvez référencer directement les propriétés et les méthodes de l'élément lui-même dans l'expression ou utiliser d'autres objets du navigateur. L'expression est comme si elle se trouvait dans une fonction membre de cet élément.

Attribuer des valeurs aux propriétés inhérentes des éléments

Vous pouvez par exemple positionner un élément en fonction de la taille du navigateur.

#myDiv {
position : absolue ;
largeur : 100px ;
hauteur :
gauche : expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

Attribuez une valeur à l'attribut personnalisé de l'élément

Par exemple, supprimez la zone de lien en pointillé sur la page. L'approche habituelle est :

link1
link2
link3

Cela peut ne pas être apparent à premier coup d'oeil Cela montre les avantages d'utiliser l'expression, mais s'il y a des dizaines voire des centaines de liens sur votre page, utiliserez-vous toujours Ctrl+C et Ctrl+V mécaniquement. De plus, en comparant les deux, lequel produit le plus de redondance ? Et pourquoi pas plus de codes ?

La façon d'utiliser l'expression est la suivante :

a {star : expression(onfocus=this.blur)}
link1
link2
link3


Explication : L'étoile à l'intérieur est un attribut défini arbitrairement par vous. Vous pouvez le définir comme vous le souhaitez, puis l'instruction contenue dans expression() est le script JS. N'oubliez pas qu'il y a un guillemet entre l'attribut personnalisé et l'expression. Parce que l'essence est toujours CSS, c'est. placé dans la balise de style, et Pas dans le script. OK, il est donc facile d’éliminer la zone en pointillé du lien dans la page en une seule phrase. Mais ne soyez pas complaisant. Si l’effet spécial déclenché est un changement d’attribut CSS, le résultat sera différent de votre intention initiale. Par exemple, si vous souhaitez changer la couleur de la zone de texte sur la page lorsque la souris entre et sort, vous pouvez naturellement penser qu'elle doit être écrite comme
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}


Mais le résultat est une erreur de script. La bonne façon de l'écrire est d'écrire. la définition du style CSS dans la fonction, comme suit Affichage :

Remarque Ce n'est pas très nécessaire Il n'est généralement pas recommandé d'utiliser l'expression car l'expression nécessite des ressources de navigateur plus élevées.

Exemple : Utiliser une expression en CSS pour implémenter le contrôle par lots d'objets d'interface

Description du problème : Nous savons, grâce à l'utilisation des styles CSS, que nous pouvons définir l'attribut de classe d'un lot d'objets pour spécifier le même style. Unifier l'interface. Mais comment unifier les événements d'objets d'un même type ? Par exemple : il existe d'innombrables interfaces Comment se rendre compte que lorsque la souris passe cette image, le src de l'image devient **_over. jpg ?


Solution : Utiliser la méthode d'expression de css
Pour une implémentation spécifique, veuillez regarder la méthode d'écriture de .css :

/*Remplacer l'image CSS*. /
#imgScript { /*Ici, utilisez l'ID de l'objet comme style générique, vous pouvez également définir une fonction CSS*/
star:expression(
onmouseover = function()
{
/*Remplacer l'image*/
if(this.hover != null) {
this.name = this.src
this.src = this.src.replace('.jpg', '_over; .jpg');
this.HasChg = 1;
}
},
onmouseout = function()
{
/*Restaurer l'image originale*/
if (this.HasChg != null){
this.src = this nom;
this.HasChg = null
}
)

}/* fin imgScript*/