Comment définir le style CSS dans jq-js tutoriel-php.cn

Comment définir le style CSS dans jq

青灯夜游

Libérer： 2023-01-05 16:08:04

original

14898 Les gens l'ont consulté

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.

Comment définir le style CSS dans jq

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>

Copier après la connexion

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.

Syntaxe :

, 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 :

, classname est le nom de la catégorie à changer. 🎜>Méthode 1.height() : Obtenez et définissez la hauteur de l'élément. La syntaxe est la suivante :

Syntaxe pour obtenir la hauteur :

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 >3.innerWidth.() : Obtenez la largeur de l'élément (y compris les remplissages gauche et droit)

Syntaxe :

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).

Syntaxe :

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();

Syntaxe :

height(value);

Méthode 6.width() : récupère et définit la largeur de l'élément. La syntaxe est la suivante :

Syntaxe pour obtenir la largeur :

value=innerHeight();

Syntaxe pour définir la largeur :

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>

Copier après la connexion

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!