So ändern Sie den CSS-Stil dynamisch mit JQuery

Methoden für jquery zum dynamischen Ändern von CSS-Stilen durch CSS-Methoden; 2. Festlegen eines CSS-Stils für das angegebene HTML-Element; 4. Ausblenden und Anzeigen von p oder; anderes angegebenes HTML-Element.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JQuery-Version 3.2.1, Dell G3-Computer.

jquery implementiert eine Methode zum dynamischen Ändern von CSS-Stilen.

Die Details sind wie folgt:

jquery ist fast zur Standard-JS-Bibliothek für die Entwicklung von WEB-Anwendungen geworden, was untrennbar mit seiner Einfachheit und Benutzerfreundlichkeit verbunden ist. Als Back-End-Entwickler ist die Steuerung des CSS-Stils beim Erstellen einiger Front-End-Seiten unverzichtbar und muss beherrscht werden. Wenn es sich um statisches CSS handelt, kann es natürlich direkt geschrieben werden, aber einige Schnittstellen erfordern einige dynamische Effekte, wie z. B. Farbänderungen, Änderungen der Schriftgröße und sogar in der Realität ausgeblendete p usw. Diese alle erfordern Javascript, um ihre CSS-Stile dynamisch zu steuern . Im Folgenden finden Sie eine Zusammenfassung der häufig verwendeten CSS-Stile

1. Geben Sie dem angegebenen HTML-Element einen bestimmten CSS-Stil an
3
4. Anzeige p oder andere angegebene HTML-Elemente ausblenden

1. Ändern Sie den Stil des Hyperlinks

$("#mylink a").css('color','#111111');
//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。
//.css(‘color','#111111');表示把颜色设为'#111111'

2. Geben Sie einen definierten CSS-Stil für das angegebene HTML-Element an

1 Datei Erstellen Sie einen CSS-Stil in

.mystyle{width:200px;height:100px;}

und weisen Sie dann mit jquery den Wert

$("#result").css(mystyle);

2 zu. Sie können ein CSS-Objekt (dh das Javascript-Objekt) definieren und dann den Wert

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

zuweisen Ähnlich wie bei der externen Link-Methode.

Drei anzeigen CSS-Methode

var mycolor=$("#mylink a").css("color");
if ($('#myp').css('display')=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

Empfohlenes Lernen: „

JQuery-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Stil dynamisch mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!