Comment ajouter du style CSS dans jquery-js tutoriel-php.cn

Comment ajouter du style CSS dans jquery

藏色散人

Libérer： 2021-03-05 10:44:24

original

16061 Les gens l'ont consulté

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

Comment ajouter du style CSS dans jquery

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)

Copier après la connexion

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>

Copier après la connexion

[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");

Copier après la connexion

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

css("propertyname","value");

Copier après la connexion

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>

Copier après la connexion

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!