Introduction à l'utilisation de CSS expression_CSS/HTML

L'attribut CSS peut être suivi d'une expression Javascript, et 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 vous pouvez 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 attributs inhérents des éléments

Par exemple, vous pouvez positionner un élément en fonction de la taille du navigateur.

#myDiv?{
position:?absolute;
width:?100px;
height:?100px;
left:?expression(document.body.offsetWidth?-?110?+ ?"px");
top:?expression(document.body.offsetHeight?-?110?+?"px");
background:?red;
}

Attribuer des valeurs aux attributs personnalisés des éléments

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

link1
link2
link3?

À première vue, les avantages de l'utilisation de l'expression ne sont peut-être pas évidents, 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 ? , lequel génère le plus de code redondant ?

La méthode d'utilisation de l'expression est la suivante :?

a?{star?:?expression(onfocus=this.blur)}

link1
link2
?

Explication : L'étoile à l'intérieur est un attribut défini par vous-même. Vous pouvez la définir comme vous le souhaitez. Ensuite, l'instruction contenue dans expression() est le script JS. N'oubliez pas qu'il existe d'autres attributs entre l'attribut personnalisé et. expression. Un guillemet, car l'essence est toujours CSS, il est donc placé dans la balise style au lieu du s?script. OK, cela permet d'éliminer facilement la zone de lien en pointillé 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 ?

input?
{star?:?expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this .style.backgroundColor="#FFFFFF")}


input?{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 indiqué ci-dessous :

input?{star?:?expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})?}



?

Attention

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 relativement élevées.