suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie CSS- und Klassenmethoden in JQuery für Stiloperationen

So verwenden Sie CSS- und Klassenmethoden in JQuery für Stiloperationen

清浅
清浅Original
2018-11-13 14:48:452195Durchsuche

Dieser Artikel stellt Fälle zu jQuery-Operationsstilen und zum Ändern von Stilen vor. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein 🎜>

jQuery-Operationsstil

Klassenoperation

(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”);
CSS-Operation (die Operation ist Stileigenschaften) 

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

Case-Sharing: Interlaced-Farbwechsel

Ändern Sie die Hintergrundfarbe durch CSS-Operationen und Klassenoperationen in jQuery 

<!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>

Rendering:

Image 9.jpgZusammenfassung:

Das war's für diesen Artikel. Ich hoffe, dass es so sein wird hilfreich für alle, um jQuery-Inhalte zu lernen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS- und Klassenmethoden in JQuery für Stiloperationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css class
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vertiefendes Erlernen von jQuery Animate (3)Nächster Artikel：Vertiefendes Erlernen von jQuery Animate (3)

In Verbindung stehende Artikel

Mehr sehen