Maison > interface Web > js tutoriel > Comment ajouter du style CSS à js

Comment ajouter du style CSS à js

藏色散人
Libérer: 2023-01-06 11:13:36
original
12484 Les gens l'ont consulté

Comment ajouter un style CSS dans js : 1. Ajoutez un style via "$("span").css("nom de l'attribut CSS", "valeur de l'attribut")" 2. Via "addClass()"; Méthode pour ajouter des styles CSS.

Comment ajouter du style CSS à js

L'environnement d'exploitation de cet article : système Windows7, version jquery3.2.1&&css3, ordinateur Dell G3.

js ajoute des styles CSS :

Étant donné que jquery prend en charge CSS3, il est bien compatible avec de nombreux navigateurs, il est donc préférable d'utiliser les styles CSS via jquery.

  • js ajoutant la méthode de style CSS

Si le style CSS n'est pas défini, vous pouvez appeler la méthode css() de l'élément pour ajouter le style.

$("span").css("css属性名","属性值")
Copier après la connexion

Exemple : définissez les polices avec les balises span sur rouge

$("span").css("color","red")
Copier après la connexion

S'il s'agit d'un style CSS défini, il peut être ajouté via la méthode addClass(), telle que

<style type="text/css">
   .aa {
        border:1px solid red;
    }
</style>
  
$("#txtName").addClass("aa");
<input id="txtName"type="text"value="请输入你的姓名"/>
Copier après la connexion
  • Comment utiliser les styles CSS :

1、.css("样式"):获得样式值,比如$("input").css("color") 获得input中字体的颜色
2、.css("样式","value"):为样式赋值,如$("input").css("color","red");
3、.addClass("样式类1,样式类2,样式类3"):可以添加多个定义好的样式类
4、.hasClass("样式类类"):判断是否存在该样式
5、.toggleClass("样式类"):如果存在(不存在)就切换(删除)样式
6、.toggleClass("样式类",swith):如果swith为false,则删除样式,如果swith为true,则切换成该类
7、removeClass("样式类"):移除样式类
8、.css({样式名:"value",样式名:"value",样式名:"value"}):可以多次添加样式
Copier après la connexion

Étude recommandée : "Tutoriel avancé JavaScript"

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal