JQUERY change CSS dynamiquement - il est facile!

Les plats clés

• jQuery fournit un moyen facile de modifier dynamiquement les styles CSS sur un site Web, en utilisant la fonction .css () pour modifier des propriétés spécifiques, telles que la couleur, le flotteur, la couleur d'arrière-plan, et bien d'autres.
• En plus de modifier les styles CSS existants, jQuery permet la suppression des styles via la méthode .RemoveClass () et l'extension des styles existants en fonction de leurs valeurs actuelles, telles que le rembourrage ou la marge.
• Plusieurs propriétés CSS peuvent être modifiées simultanément à l'aide de jQuery, et il est également possible d'ajouter, de supprimer ou de basculer les classes CSS sur des éléments, d'animer les propriétés CSS ou de modifier les propriétés CSS en fonction de leurs valeurs actuelles, des interactions utilisateur comme Hover, Click ou défiler.

Démo de la fonction CSS Changer de manière dynamique de vos styles de site Web est maintenant l'engouement qui prend le contrôle du Web! Dans ce post court mais doux, je vais expliquer comment faire des astuces CSS simples mais efficaces en utilisant jQuery. C'est un must connu pour tous les développeurs de jQuery passionnés!

Modifier l'élément CSS spécifique

Il est vraiment facile de changer CSS avec jQuery C'est le format de la fonction .css ().

<span>$('jQuery selector').css({"css property name":"css property value"});</span>

Voici quelques exemples courants:

<span>//change paragraph text colour to green 
</span><span>$('p').css({"color":"green"});
</span>
<span>//float all divs with class .left
</span><span>$('div.left').css('float');
</span>
<span>//change all elements with class .bg-red to have a red background
</span><span>$('.bg-red').css({"background-color":"red"});</span>

nid vos commandes jQuery CSS

Il est pratique de savoir que jQuery peut également interpréter le formatage CSS et DOM des propriétés multiples. Cela vous fera non seulement gagner beaucoup de temps, mais cela a l'air plus jolie!

newimg<span>.css({'background-image': 'url('+newimgsrc+')'});
</span>newimg<span>.css({'position': 'absolute'});
</span>newimg<span>.css({'height': '70px'});
</span>newimg<span>.css({'width': '200px'});
</span>newimg<span>.css({'top': '68px'});
</span>newimg<span>.css({'right': '2px'});</span>

Est exactement le même que:

newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});</span>

supprimer les styles CSS

Il existe deux façons principales de supprimer les styles CSS, pas beaucoup de différence entre eux. 1. Vous pouvez supprimer la classe associée à la page ou à l'élément

<span>//remove text color from a div
</span><span>$('#mydiv').removeClass('colors');</span>

2. Vous pouvez également supprimer directement les styles CSS sur certains éléments

<span>//remove text color from a div
</span><span>$('#mydiv').css('color', '');</span>

Il s'agit également d'une astuce Nifty JQuery CSS pour supprimer et ajouter une classe dans le même appel.

<span>//change text color from red to green (classes specified in stylesheet)
</span><span>$('#div').removeClass('red').addClass('green');</span>

Extension des valeurs de styles existantes

Vous voudrez peut-être prolonger un style en fonction de sa valeur actuelle. Par exemple, si le padding d'un élément était de 10px, le code suivant entraînerait un padding total de 25px.

<span>.css( "padding-left", "+=15" )</span>

jQuery .Css () Propriété de fonction

Comme la plupart d'entre vous, les développeurs JQuery, le savent, à partir de jQuery 1.4, .css () nous permet de passer une fonction de valeur de propriété. Ceci est pratique pour renvoyer les valeurs CSS actuelles pour déterminer les changements.

<span>$('div.example').css('width', function(index) {
</span>  <span>return index * 50;
</span><span>});</span>

COMMENTS COMMENTS CSS Modifications

Voici quelques exemples de changements de CSS de fond.

<span>$('#myDiv').css('background-image', 'my_image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css('background', 'path/to/image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css("background-image", "url(/myimage.jpg)");  
</span>
<span><br /><br />
</span><span><h2>A Full Code Example - Set Div Background Image</h2>
</span><span>This is a full example of jQuery Code to set a background image into a div dynamically when the page is loaded.
</span>
<span>[code lang="js"]
</span><span><script type='text/javascript'>
</span><span>$(document).ready(function() {
</span>	<span>//preload image (add timestamp to prevent cache)
</span>	<span>var newimgsrc = 'https://www.sitepoint.com/wp-content/uploads/jquery4u/2011/03/jquery-plugins2.jpg?' + (new Date().getTime());
</span>	<span>var newimg = $('#header');
</span>    <span>//replace the image
</span>	<span>$('#header').css("background-image", "url("+newimgsrc+")");
</span>	newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});
</span>	newimg<span>.show();
</span><span>});
</span><span></script></span>

Les questions fréquemment posées sur le changement de CSS avec jQuery

Comment puis-je utiliser jQuery pour modifier plusieurs propriétés CSS à la fois?

jQuery vous permet de modifier plusieurs propriétés CSS simultanément à l'aide de la méthode .css (). Cette méthode accepte un objet où vous pouvez définir plusieurs propriétés CSS et leurs nouvelles valeurs. Voici un exemple:

$ ("p"). CSS ({
"fond-couleur": "jaune",
"Font-Size": "200%"
});
Dans cet exemple, tous les éléments de paragraphe auront leur couleur de fond en jaune et leur taille de fonds pour 200%. Éléments?

Oui, jQuery fournit la méthode .AddClass () qui vous permet d'ajouter une ou plusieurs classes à des éléments sélectionnés. Ceci est particulièrement utile lorsque vous avez des classes CSS prédéfinies et que vous souhaitez les appliquer dynamiquement. Voici comment vous pouvez le faire:

$ ("P"). AddClass ("Highlight");
Dans cet exemple, la classe "Highlight" sera ajoutée à tous les éléments de paragraphe.

Comment puis-je supprimer les classes CSS des éléments à l'aide de jQuery?

jQuery fournit la méthode .RemoveClass () pour supprimer une ou plusieurs classes à partir d'éléments sélectionnés. Voici un exemple:

$ ("p"). SuppeClass ("Highlight");
Dans cet exemple, la classe "Highlight" sera supprimée de tous les éléments de paragraphe.

Puis-je basculer les classes CSS sur les éléments en utilisant la méthode jQuery? Présentez-le ou supprimez-le si c'est le cas. Voici un exemple:

$ ("p"). ToggleClass ("Highlight");
Dans cet exemple, la classe "Highlight" sera basée sur tous les éléments de paragraphe. Il vous suffit de passer le nom de la propriété en tant que chaîne. Voici un exemple:

var color = $ ("p"). CSS ("Color");

Dans cet exemple, la couleur actuelle du premier élément de paragraphe sera stockée dans la variable "Color".

Je peux utiliser jQuery pour modifier les propriétés CSS basées sur leurs valeurs actuelles? méthode. Cette fonction sera appelée pour chaque élément sélectionné, et sa valeur de retour sera utilisée comme nouvelle valeur de la propriété. Voici un exemple:

$ ("P"). CSS ("Font-Size", fonction (index, valeur) {
return parsefloat (valeur) * 1.2 "px";
});

Dans cet exemple, la taille de la police de tous les éléments du paragraphe sera augmenté par 20%.

Propriétés?

Oui, jQuery fournit la méthode .animate () qui vous permet de créer des animations personnalisées en modifiant les propriétés CSS au fil du temps. Voici un exemple:

$ ("p"). Animate ({
"opacité": 0,5,
"Font-Size": "200%"

}, 2000);

Dans cet exemple, l'opacité et la taille de la police de tous les éléments du paragraphe seront animées sur 2 secondes. Hover?

Vous pouvez utiliser la méthode .hover () en combinaison avec .css () pour modifier les propriétés CSS lorsque le pointeur de souris plane sur un élément. Voici un exemple:

$ ("p"). Hover (function () {
$ (this) .css ("colore", "red");
}, function () {
$ (this) .css ("Color", "");
}); Réinitialisez la couleur d'origine lorsque le pointeur de la souris quitte.

Puis-je utiliser jQuery pour modifier les propriétés CSS en clic?

Oui, vous pouvez utiliser la méthode .click () en combinaison avec .css () pour modifier les propriétés CSS lorsqu'un élément est cliqué. Voici un exemple:

$ ("p"). Cliquez sur (fonction () {
$ (this) .css ("couleur", "rouge");
});
Dans cet exemple, la couleur des éléments de paragraphe sera modifiée en rouge lorsqu'ils seront cliqués.

Comment puis-je utiliser jQuery pour modifier les propriétés CSS sur Scroll?

Vous pouvez utiliser la méthode .scroll () en combinaison avec .css () pour modifier les propriétés CSS lorsque l'utilisateur défile la page. Voici un exemple:

$ (fenêtre) .scroll (function () {
$ ("p"). CSS ("Color", "Red");
});
Dans cet exemple, la couleur de tous les éléments de paragraphe sera modifiée en rouge lorsque l'utilisateur fait défiler la page.

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!