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

May 16, 2016 pm 04:39 PM
css样式

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.

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So erstellen Sie eine Diashow-Layoutseite mit HTML und CSS So erstellen Sie eine Diashow-Layoutseite mit HTML und CSS Oct 16, 2023 am 09:07 AM

So erstellen Sie eine Folienlayoutseite mit HTML und CSS. Einführung: Das Folienlayout wird häufig im modernen Webdesign verwendet und ist bei der Anzeige von Informationen oder Bildern sehr attraktiv und interaktiv. In diesem Artikel wird erläutert, wie Sie mit HTML und CSS eine Folienlayoutseite erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. HTML-Layoutstruktur Zuerst müssen wir eine HTML-Layoutstruktur erstellen, einschließlich eines Foliencontainers und mehrerer Folienelemente. Der Code sieht so aus: <!DOCTYPEhtml&

So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist Nov 20, 2023 am 11:52 AM

So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist. In CSS ist der Pseudoklassenselektor ein leistungsstarkes Werkzeug, das dies kann Durch eine bestimmte Auswahlmethode werden bestimmte Elemente in einem HTML-Dokument ausgewählt. Unter diesen ist:nth-child() ein häufig verwendeter Pseudoklassenselektor, der untergeordnete Elemente an bestimmten Positionen auswählen kann. :nth-child(n) kann mit dem n-ten untergeordneten Element in HTML übereinstimmen, und :nth-child(-n) kann übereinstimmen

So implementieren Sie ein einfaches Chat-Seitenlayout mit HTML und CSS So implementieren Sie ein einfaches Chat-Seitenlayout mit HTML und CSS Oct 18, 2023 am 08:42 AM

So verwenden Sie HTML und CSS, um ein einfaches Chat-Seitenlayout zu implementieren. Mit der Entwicklung moderner Technologie verlassen sich die Menschen für Kommunikation und Kommunikation zunehmend auf das Internet. Auf Webseiten sind Chatseiten eine sehr häufige Layoutanforderung. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML und CSS ein einfaches Chat-Seitenlayout implementieren, und geben konkrete Codebeispiele. Zuerst müssen wir eine HTML-Datei erstellen, Sie können einen beliebigen Texteditor verwenden. Erstellen Sie am Beispiel von index.html zunächst einen einfachen HTML-Code

So implementieren Sie ein detailliertes Seitenlayout mit HTML und CSS So implementieren Sie ein detailliertes Seitenlayout mit HTML und CSS Oct 20, 2023 am 09:54 AM

So verwenden Sie HTML und CSS zum Implementieren eines detaillierten Seitenlayouts. HTML und CSS sind die grundlegenden Technologien zum Erstellen und Entwerfen von Webseiten. Durch die entsprechende Verwendung dieser beiden können wir verschiedene komplexe Webseitenlayouts erstellen. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML und CSS ein detailliertes Seitenlayout implementieren, und es werden spezifische Codebeispiele bereitgestellt. Erstellen Sie eine HTML-Struktur. Zuerst müssen wir eine HTML-Struktur erstellen, um den Inhalt unserer Seite zu platzieren. Das Folgende ist eine grundlegende HTML-Struktur: <!DOCTYPEhtml&g

So erstellen Sie ein responsives Kartenwand-Layout mit HTML und CSS So erstellen Sie ein responsives Kartenwand-Layout mit HTML und CSS Oct 25, 2023 am 10:42 AM

So erstellen Sie ein responsives Kartenwandlayout mit HTML und CSS. Im modernen Webdesign ist responsives Layout eine sehr wichtige Technologie. Mithilfe von HTML und CSS können wir ein responsives Kartenwand-Layout erstellen, das sich an Geräte mit unterschiedlichen Bildschirmgrößen anpasst. Hier sehen Sie genauer, wie Sie mit HTML und CSS ein einfaches responsives Kartenwandlayout erstellen. HTML-Teil: Zuerst müssen wir die Grundstruktur in der HTML-Datei einrichten. Wir können eine ungeordnete Liste (<ul>) und verwenden

So erstellen Sie ein responsives Musik-Player-Layout mit HTML und CSS So erstellen Sie ein responsives Musik-Player-Layout mit HTML und CSS Oct 19, 2023 am 10:02 AM

So erstellen Sie mithilfe von HTML und CSS ein ansprechendes Layout für einen Musikplayer. In der heutigen Zeit der rasanten Entwicklung der Informationstechnologie ist Musik als Unterhaltungsform tief in das Leben der Menschen eingedrungen. Für ein besseres Musikerlebnis bieten viele Websites und Anwendungen Online-Musikplayer an. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML und CSS ein responsives Musik-Player-Layout erstellen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir eine Grundstruktur mit HTML erstellen. Hier ist ein einfaches HTML-Layout-Beispiel: <!

So betten Sie CSS-Stile in HTML ein So betten Sie CSS-Stile in HTML ein Sep 20, 2023 am 11:37 AM

Zu den Methoden zum Einbetten von CSS-Stilen in HTML gehören Inline-Stile, interne Stylesheets und externe Stylesheets. Detaillierte Einführung: 1. Inline-Stil bezieht sich auf das direkte Schreiben des CSS-Stils in das HTML-Tag und das Festlegen des Stils des Elements über das Stilattribut. Der Vorteil dieser Methode besteht darin, dass sie einfach und intuitiv ist und den Stil schnell festlegen kann Es handelt sich jedoch um ein bestimmtes Element. Der Stil ist jedoch eng mit der HTML-Struktur verknüpft, was die Wartung und Wiederverwendung erschwert. Gleichzeitig muss das gesamte HTML-Dokument durchlaufen werden , was ineffizient ist; 2. Interne Stylesheets usw.

PHP-Kampf gegen reguläre Ausdrücke: Passende CSS-Stile PHP-Kampf gegen reguläre Ausdrücke: Passende CSS-Stile Jun 22, 2023 pm 06:31 PM

In der Webentwicklung sind CSS-Stylesheets ein unverzichtbarer Bestandteil, mit denen sich bequem Stile für HTML-Elemente festlegen lassen. Manchmal müssen wir jedoch bestimmte Stile aus einer großen CSS-Datei extrahieren und können dann die Funktion für reguläre Ausdrücke von PHP zum Abgleich verwenden. In diesem Artikel wird erläutert, wie Sie reguläre PHP-Ausdrücke verwenden, um CSS-Stile in der Praxis anzupassen. Werfen wir zunächst einen Blick auf die Grundstruktur von CSS-Stilen: selector{property:value;pro

See all articles