recherche

Maison >interface Web >js tutoriel >Comment utiliser les méthodes CSS et de classe dans jquery pour les opérations de style

Comment utiliser les méthodes CSS et de classe dans jquery pour les opérations de style

清浅
清浅original
2018-11-13 14:48:452193parcourir

Ce que cet article vous apporte, c'est de présenter des cas sur les styles de fonctionnement de jQuery et les changements de styles. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile

<.>

style d'opération jQuery

opération de classe

(1)判断是否有样式类
hasClass(name)//name:用于判断的样式类名，返回值为true false
判断div是否有demo的样式类
$(“div”).hasClass(“demo”)
(2)添加样式类
addClass(name)//name指需要添加的样式类名，注意参数不要带点.
//给div添加demo的样式。
$(“div”).addClass(“demo”);
(3)移除样式类
removeClass("name")//name:需要移除的样式类名
//移除div中demo的样式
$(“div”).removeClass(“demo”);

opération css (l'opération est le style attribut)

(1)获取样式
css(name)//name:需要获取的样式名称
//获取div的背景颜色属性
$("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。
(2)设置单个样式
css(name,value)//name：需要设置的样式名称,value：对应的样式值
//给一个div标签的背景修改成红色
$("div").css("background","red");
（3）设置多个样式
css(obj)//参数是一个对象，对象中包含了需要设置的样式名和样式值
//例如
$("#one").css({
 "background":"gray",
 "width":"400px",
 "height":"200px"
});

Partage de cas : changement de couleur entrelacé

est modifié via des opérations CSS et des opérations de classe dans jQuery Arrière-plan différent couleurs 

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
	<style>
	*{
		padding: 0;
		margin:0;
	}
		ul{list-style: none;
		}
		li{
			width:300px;
			height:30px;
			background-color:rgb(14,150,249);
			
		}
		.even{
			background-color:rgb(241,70,215);
		}
	</style>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
		<li>第五个</li>
		<li>第六个</li>
	</ul>
<script src="jquery/jquery-1.12.4.js"></script>
   <script>
   $(function(){
//给奇数的li修改背景颜色
$("li:odd").css("backgroundColor","pink");
//给偶数的li添加even类
$("li:even").addClass(&#39;even&#39;);
});
</script>
</body>
</html>

Rendu :

Image 9.jpg

Résumé : Ce qui précède est le contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre le contenu de jQuery.


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!

jquery css class
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：Apprentissage approfondi de jQuery Animate (3)Article suivant：Apprentissage approfondi de jQuery Animate (3)

Articles Liés

Voir plus