Maison > Article > interface Web > qu'est-ce qu'une expression CSS

qu'est-ce qu'une expression CSS

青灯夜游original: 2021-07-06 16:37:573589parcourir

l'expression css consiste à utiliser expression() après l'attribut css pour connecter une expression JavaScript. La valeur de l'attribut css est le résultat de l'expression JavaScript ; le format de syntaxe est "attribut css : expression (expression JavaScript) ;".

L'environnement d'exploitation de ce tutoriel : système Windows 7, CSS3&&javascript version 1.8.5, ordinateur Dell G3.

IE5 et les versions ultérieures prennent en charge l'utilisation d'expressions en CSS pour associer les attributs CSS aux scripts Javascript. Les attributs CSS ici peuvent être des attributs inhérents à l'élément ou des attributs personnalisés.

l'expression CSS consiste à utiliser expression() après l'attribut CSS pour connecter une expression JavaScript. La valeur de l'attribut CSS est le résultat 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 apparaît comme si elle se trouvait à l'intérieur d'une fonction membre de cet élément.

Vous trouvez que le texte ci-dessus est un peu obscur ? Cela n'a pas d'importance, il vous suffit de savoir : nous pouvons écrire des scripts Javascript dans des fichiers CSS via une expression et l'utiliser pour obtenir des fonctions et des effets très pratiques.

Application d'expression :

1. Attribuez des valeurs aux attributs inhérents aux éléments. L'exemple suivant consiste à positionner un élément en fonction de la taille du navigateur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
#myDiv {
position: absolute;
width: 100px;
height: 100px;
background:#c00;
left: expression(document.body.offsetWidth - 180   "px");
top: expression(document.body.offsetHeight - -80   "px");
text-align:center;
line-height:90px;
color:#fff;
}
</style>
</head>
<body>
<div id="myDiv">mb5u.com</div>
</body>
</html>

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

Regardons l'exemple suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
a {star:expression(this.onFocus=this.blur())}
</style>
</head>
<body>
<a href="#" _fcksavedurl="#">模板天下 - mid.lt263.com/mb
</p>
</body>
</html>

Explication : L'étoile à l'intérieur est un attribut défini arbitrairement par vous. Vous pouvez la définir comme vous le souhaitez, puis l'inclure. dans expression() L'instruction est un 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, elle est placée dans la balise de style au lieu du script. De cette façon, il est facile d’éliminer la zone de lien en pointillé dans la page en une seule phrase. Ce qui nécessite votre attention particulière : à moins qu'il n'y ait un besoin très particulier d'utiliser une expression, il n'est généralement pas recommandé d'utiliser une expression, car l'expression nécessite des ressources de navigateur relativement élevées.

Remarque :

Les expressions CSS sont un moyen puissant (mais dangereux) de définir dynamiquement les propriétés CSS. Internet Explorer prend en charge les expressions CSS à partir de la version 5. Dans l'exemple ci-dessous, une expression CSS peut être utilisée pour changer la couleur d'arrière-plan toutes les heures :

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Comme indiqué ci-dessus, une expression JavaScript est utilisée dans expression. Les propriétés CSS sont définies en fonction de l'évaluation des expressions JavaScript. La méthode d'expression ne fonctionne pas dans d'autres navigateurs, il est donc utile de la configurer spécifiquement pour Internet Explorer dans une conception multi-navigateurs.

Le problème avec les expressions, c'est qu'elles sont évaluées plus souvent qu'on ne le pense. Non seulement lorsque la page est affichée et zoomée, mais aussi lorsque la page défile et même lorsque la souris est déplacée, elle sera recalculée. Ajoutez un compteur à une expression CSS pour suivre la fréquence à laquelle l'expression est évaluée. Vous pouvez facilement réaliser plus de 10 000 calculs en déplaçant simplement la souris sur la page.

Une façon de réduire le nombre de fois qu'une expression CSS est évaluée consiste à utiliser une expression unique, qui attribue le résultat à un attribut de style spécifié lors de sa première exécution et utilise cet attribut pour remplacer l'expression CSS. Si les propriétés de style doivent changer dynamiquement au cours des cycles de page, l'utilisation de gestionnaires d'événements au lieu d'expressions CSS est une option viable. Si vous devez utiliser des expressions CSS, n'oubliez pas qu'elles sont évaluées des milliers de fois et peuvent avoir un impact sur les performances de votre page.

(Partage de vidéos d'apprentissage : 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

Article précédent：Que signifie fcous en javascript ?Article suivant：Que signifie fcous en javascript ?

Articles Liés

Voir plus