Maison > Article > interface Web > Comment définir le style CSS dans jq
Comment définir le style CSS dans jq
- 青灯夜游original
- 2021-04-13 14:40:2214817parcourir
La méthode css() peut être utilisée dans jquery pour définir les styles CSS. La méthode css() peut définir un ou plusieurs attributs de style pour l'élément sélectionné ; pour définir un seul style CSS, utilisez l'instruction "css(attribute name, value);" et pour définir plusieurs styles, utilisez "css({attribute);" nom 1 : valeur) 1, nom d'attribut 2 : valeur 2...}" instruction.
L'environnement d'exploitation de ce tutoriel : système Windows7 , version jquery1.10.0, ordinateur Dell G3.
Utilisez la méthode css() pour définir les styles CSS. La méthode
css() définit un ou plusieurs attributs de style. pour l'élément sélectionné. >La syntaxe est la suivante :
Un style :
css(属性名,值);Plusieurs styles :
css({属性名1:值1,属性名2:值2...})Exemple : Utiliser le css () pour définir les propriétés CSS. 🎜>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>注意字体和背景色的变化<h2>
<p>注意字体和背景色的变化</p>
<p>注意字体和背景色的变化</p>
<button type="button">点击我观察变化</button>
</body>
</html>
Méthodes liées aux catégories de style
Méthodes liées aux catégories CSS dans la méthode jquery >1.addClass() : Ajoutez un attribut de catégorie à l'élément HTML correspondant.
, classname est le nom de la catégorie à ajouter. 2.hasClass() : Vous pouvez déterminer si l'élément correspondant a l'attribut spécifié. category.
Syntaxe :
addClass(classname)Si l'élément correspondant a une catégorie nommée classname, la méthode hasClass() renvoie True ; sinon, elle renvoie False ; Méthode .removeClass() : supprime l'attribut de classe spécifié pour l'élément HTML correspondant
Syntaxe :
, classname est la catégorie à changer.hasClass(classname)4.toggleClass() méthode. : Vérifiez la classe spécifiée dans chaque élément. Si elle n'existe pas, ajoutez la classe, si elle est définie, supprimez-la Syntaxe :
Syntaxe pour définir la hauteur. : removeClass(classname)
Méthode 2.innerHeight() : Obtenez la hauteur de l'élément (y compris la bordure intérieure du haut et du bas)
Syntaxe : toggleClass(classname)
Méthode 4.outerHeight() : Obtenez la hauteur de l'élément (y compris les bordures intérieures supérieure et inférieure, les bordures et les marges).
Méthode 5.outerWidth() : récupère la largeur de l'élément (y compris le remplissage gauche et droit, la bordure et la marge extérieure). value=height();
height(value);
value=innerHeight();
Exemple : Obtenir la hauteur du html élément. value=innerWidth();
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
p{
margin:8px;
font-size:16px;
}
.selected{
color:red;
}
.highlight{
background:yellow;
}
</style>
</head>
<body>
<p>注意我的变化</p>
<button type="button" id="addClass">添加样式</button>
<button type="button" id="removeClass">删除样式</button>
<script type="text/javascript">
$("#addClass").click(function(){
$("p").addClass("selected highlight");
});
$("#removeClass").click(function(){
$("p").removeClass("selected highlight");
});
</script> Tutoriels vidéo associés recommandés : Tutoriel jQuery
(Vidéo)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!