Maison > Article > interface Web > Comment changer de style dans jquery
Comment changer de style dans jquery
- 青灯夜游original
- 2023-01-28 16:19:1410764parcourir
Comment changer le style de jquery : 1. Utilisez css() pour définir un nouveau style pour l'élément spécifié. La syntaxe "$(selector).css({"Nom de l'attribut 1": "Valeur de l'attribut 1", " Nom de l'attribut 2="Valeur de l'attribut 2",...})"; 2. Utilisez attr() pour définir la valeur de l'attribut de style de l'élément spécifié, la syntaxe est "$(selector).attr("style", "Nom d'attribut 1 : valeur d'attribut 1 ; nom d'attribut 2 : valeur d'attribut 3 ;...")".
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.
Il existe deux façons de changer le style de jquery :
Modifiez-le via la méthode css()
Modifiez-le via la méthode attr()
Méthode 1 : Utilisez le css () méthode
La méthodecss() peut définir un ou plusieurs attributs de style de l'élément correspondant.
Utilisez simplement la méthode css() pour définir un nouveau style
Syntaxe :
$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"});
});
});
</script>
<style>
.tr1 {
color: green;
}
.tr2 {
color: red;
background-color: blanchedalmond;
}
</style>
</head>
<body class="ancestors">
<div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网！</div><br>
<button>改变div元素的style样式</button>
</body>
</html>
Méthode 2 : utilisez la méthode attr()
attr() pour définir ou renvoyer la valeur d'attribut sélectionnée de l'élément.
Utilisez simplement la méthode attr() pour définir la valeur de l'attribut de style de l'élément.
Grammaire :
$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("div").attr("style", "color:pink;background-color:peru;font-size: 18px;");
});
});
</script>
<style>
.tr1 {
color: green;
}
.tr2 {
color: red;
background-color: blanchedalmond;
}
</style>
</head>
<body class="ancestors">
<div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网！</div><br>
<button>改变div元素的style样式</button>
</body>
</html>
[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end]
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!