Heim > Web-Frontend > js-Tutorial > Die jQuery-CSS()-Methode ändert den vorhandenen CSS-Stil_jquery

Die jQuery-CSS()-Methode ändert den vorhandenen CSS-Stil_jquery

WBOY
Freigeben: 2016-05-16 16:39:01
Original
1156 Leute haben es durchsucht

JQuery-Erste-Schritte-Beispiel: Verwenden Sie die CSS()-Methode, um das vorhandene CSS-Stylesheet zu ändern. Die css()-Methode ist vielseitig einsetzbar. Einer von ihnen akzeptiert zwei Eingabeparameter: Stilattribut und Stilwert, getrennt durch Kommas. Um beispielsweise die Linkfarbe zu ändern, können Sie den Code wie folgt schreiben:

$("#61dh a").css('color','#123456'); 
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'
Nach dem Login kopieren

Wenn Sie mehrere Stilattribute ändern müssen, können Sie zuerst Attributvariablen definieren und diese dann direkt der css()-Methode zuweisen.

var mycss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss);
Nach dem Login kopieren

Der obige Code definiert zunächst eine CSS-Stilattributvariable „mycss“, die dem Erstellen einer externen CSS-Datei ähnelt, und weist dann das Attribut über die Methode css() dem DIV mit der ID „#result“ zu.

Darüber hinaus kann die von jQuery bereitgestellte Methode css() auch den CSS-Attributwert eines Elements anzeigen. Um beispielsweise die Farbe eines Links anzuzeigen, lautet der Code wie folgt:

$("#61dh a").css("color")
Nach dem Login kopieren

Sie werden feststellen, dass dies dem ersten Beispiel ähnelt, hier wird jedoch nur ein Parameter (Stilattribut) übergeben.

Das Letzte, was ich vorstellen möchte, ist, wie man den Linkstil (zum Beispiel: Farbe) festlegt, nachdem die Maus gekreuzt wurde. Sie müssen die jQuery-Ereignisklassenmethode verwenden – hover(). Es ist erwähnenswert, dass die Methode hover() zwei Funktionen definieren muss, eine, wenn die Maus darüber bewegt wird, und die andere, wenn die Maus darüber bewegt wird. Die spezifische Methode ist wie folgt:

$("#61dh a").css('color','#123456'); 
$("#61dh a").hover(function(){ 
$(this).css('color','#999'); 
}, 
function(){ 
$(this).css('color','#123456'); 
}); 
//hover()方法的两个函数使用用逗号分隔
Nach dem Login kopieren

Vielleicht sind Sie schlau und haben bemerkt, dass diese Methode nicht einfach ist. Tatsächlich wird die jQuery-Methode hover() nicht zum Ändern von CSS-Stilen verwendet. In praktischen Anwendungen wird empfohlen, die Methode zum Hinzufügen/Entfernen von CSS zu verwenden, um den Linkstil zu ändern, wenn die Maus gekreuzt wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage