Maison >interface Web >js tutoriel >Comment ajouter du style CSS dans jquery

Comment ajouter du style CSS dans jquery

藏色散人original: 2021-03-05 10:44:2416101parcourir

Comment ajouter un style CSS dans jquery : 1. Utilisez la méthode addClass() pour ajouter un style CSS, une syntaxe telle que "$(selector).addClass(class)" ; 2. Utilisez la méthode css() pour définir ; style CSS, syntaxe Tel que "css("propertyname")".

L'environnement d'exploitation de cet article : système Windows 7, jquery version 1.2.6, ordinateur Dell G3.

Lors de l'utilisation de jquery, nous devons souvent ajouter dynamiquement des styles CSS à certains éléments dom. Voyons comment Jquery ajoute dynamiquement des styles CSS.

Comment ajouter un style CSS avec jquery :

Utilisez la méthode addClass() pour ajouter un style CSS.

Utilisez la méthode css() pour définir le style CSS.

1. Utilisez la méthode addClass() pour ajouter des styles CSS

La méthode addClass() ajoute une ou plusieurs classes à l'élément sélectionné. Cette méthode ne supprime pas les attributs de classe existants, ajoute uniquement un ou plusieurs attributs de classe.

Remarque : Si vous devez ajouter plusieurs classes, veuillez utiliser des espaces pour séparer les noms de classe.

Syntaxe :

$(selector).addClass(class)

Exemple :

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>向第一个 p 元素添加一个类</button>
</body>
</html>

[Apprentissage recommandé : Tutoriel vidéo jquery]

2. Méthode pour définir le style CSS

La méthode css() définit ou renvoie un ou plusieurs attributs de style de l'élément sélectionné.

Pour renvoyer la valeur de la propriété CSS spécifiée, veuillez utiliser la syntaxe suivante :

css("propertyname");

Pour définir la propriété CSS spécifiée, veuillez utiliser la syntaxe suivante :

css("propertyname","value");

Exemple :

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>
<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的背景色</button>
</body>
</html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir un entier en jsArticle suivant：Comment obtenir un entier en js

Articles Liés

Voir plus