Définit la marge intérieure supérieure d'un élément
Jquery la méthode css() Obtenir ou définir la valeur d'une propriété de style
Dans cette référence vous trouvez :
Description :Obtenir la valeur d'une propriété de style pour le premier élément dans l'ensemble des éléments sélectionnés.
Syntaxe :
.css(propertyName)
propertyNameest le nom d'une propriété CSS.
La méthode .css() est un moyen pratique pour obtenir une propriété de style de l'élément correspondant sélectionné.
Avec la méthode .css() jQuery peut aussi interpréter le formatage CSS et DOM des propriétés formées de plusieurs mots.
Par exemple, jQuery comprend et renvoie la valeur correcte pour
les .css('background-color') et
les .css('backgroundColor') .
Les propriétés CSS de sténographie (p. ex. : margin, background, border) ne sont pas pris en charge. Par exemple, si vous souhaitez récupérer la marge, utilisez : $(elem).css('marginTop') et $(elem).css('marginRight') et ainsi de suite.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="resultat"> </p>
<div style="background-color:#11ff11;"></div>
<div
style="background-color:rgb(15,99,30);"></div>
<div style="background-color:blue;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
var couleur = $(this).css("background-color");
$("#resultat").html("Ce div a une couleur: <b
style='color:" +
couleur + ";'>" + couleur + "</b>.");
});
</script>
</body>
</html>
Description : Définir une ou plusieurs des propriétés CSS pour l'ensemble des éléments sélectionnés.
Syntaxe 1 :
propertyNameUn nom de propriété CSS.
Valeur Une valeur définir pour la propriété.
Syntaxe 2 :
.css (propertyName, fonction (index, valeur))
propertyNameUn nom de propriété CSS.
fonction (index, valeur) Une fonction retournant la valeur définir. Reçoit la position d'index de l'élément dans le jeu et l'ancienne valeur comme arguments.
Lors de l'utilisation de la méthode .css() un accesseur Set de jQuery modifie la propriété de style de l'élément.
Par exemple, $('#mydiv').css('color', 'green') est équivalent document.getElementById ('mydiv').style.color = 'green' .
La définition de la valeur d'une propriété de style une chaîne vide.
Par exemple $('#mydiv').css('color', '') supprime cette propriété d'un élément si elle a été déj appliquée directement, que ce soit dans l'attribut de style HTML, ou au moyen de la méthode .css() de jQuery, ou par l'intermédiaire de manipulation DOM directe de la propriété style . Elle ne supprime pas, cependant, un style qui a été appliqué avec une règle CSS dans un élément de la feuille de style ou de la balise <style> .
A partir de la version jQuery 1.4, la méthode .css() nous permet de passer une fonction comme valeur de la propriété :
$('div.example').css('width', function(index) {
 return index * 50;
});
Cet exemple définit les largeurs des éléments correspondants des valeurs progressivement plus grandes.
Note : Notez qu'avec la notation de DOM, guillemets autour des noms de propriété sont facultatifs, mais avec mention de la CSS, ils sont nécessaires en raison du trait d'Union dans le nom.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; width:100px; font-size:14px; }
</style>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<center>
<p>Passer la sourie sur ce paragraphe et il
change de couleur</p>
<br /><br />
<p>Ou passer la sourie sur celui
ci et il change aussi de couleur.</p>
</center>
<script>
$("p").mouseover(function () {
$(this).css("color","red");
});
</script>
</body>
</html>
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#box { background: #00ffff; color:000;
width:100px; padding:10px; }
</style>
</head>
<body>
<div id="box">clique moi pour changer ma
largeur</div>
<script>
$("#box").one( "click", function () {
$( this ).css(
"width","+=100" );
});
</script>
</body>
</html>
Note : partir de la version jQuery 1.6, la méthode .css() accepte les valeurs relatives . Les valeurs relatives sont une chaîne commençant par += ou les -= pour incrémentent ou décrémentent la valeur actuelle. Par exemple, si un élément dont la largeor était 100px une largeur total de 200px entraînerait .css ( "width","+=100" ) .
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p { color:blue; font-weight:bold;
cursor:pointer;width:200px; }
</style>
</head>
<body>
<center>
<p>
Notez qu'avec la notation de DOM, guillemets autour des noms de propriété sonfacultatifs, mais avec mention de la CSS, ils sont
nécessaires en raison du trait d'Union dans le nom.
</p>
</center>
<script>
var words = $("p:first").text().split(" ");
var text = words.join("</span>
<span>");
$("p:first").html("<span>" + text +
"</span>");
$("span").click(function () {
$(this).css("background-color","yellow");
});
</script>
</body>
</html>
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p { color:green; }
</style>
</head>
<body>
<p>Passez la sourie sur les paragrapjes et
appréciez le résultat</p>
<p>Vous verrez le changement de couleur de
la police et de l'arriere plan</p>
<script>
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' :
'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
</script>
</body>
</html>
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 50px; height: 60px;color:fff;}
#rouge{ background-color: #f33; }
#bleu{ background-color: #33f; }
</style>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<center>
<div id="rouge">cliquez
moi</div><br /><br />
<div id="bleu">cliquez moi
aussi</div>
</center>
<script>
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
</script>
</body>
</html>