suchen

Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie einen CSS-Stil in JQuery hinzu

So fügen Sie einen CSS-Stil in JQuery hinzu

藏色散人
藏色散人Original
2021-03-05 10:44:2416054Durchsuche

So fügen Sie einen CSS-Stil in JQuery hinzu: 1. Verwenden Sie die Methode addClass(), um einen CSS-Stil hinzuzufügen, mit einer Syntax wie „$(selector).addClass(class)“ 2. Verwenden Sie die Methode css(), um den CSS-Stil festzulegen , mit einer Syntax wie „css( „propertyname“)“.

So fügen Sie einen CSS-Stil in JQuery hinzu

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

Bei der Verwendung von JQuery müssen wir häufig CSS-Stile zu einigen Dom-Elementen hinzufügen. Schauen wir uns an, wie JQuery CSS-Stile dynamisch hinzufügt.

So fügen Sie einen CSS-Stil in JQuery hinzu:

Verwenden Sie die Methode addClass(), um einen CSS-Stil hinzuzufügen.

Verwenden Sie die Methode css(), um den CSS-Stil festzulegen.

1. Verwenden Sie die Methode addClass(), um CSS-Stile hinzuzufügen.

Methode addClass(), um dem ausgewählten Element eine oder mehrere Klassen hinzuzufügen. Diese Methode entfernt keine vorhandenen Klassenattribute, sondern fügt nur ein oder mehrere Klassenattribute hinzu.

Hinweis: Wenn Sie mehrere Klassen hinzufügen müssen, verwenden Sie bitte Leerzeichen, um die Klassennamen zu trennen.

Grammatik: 

$(selector).addClass(class)

Beispiel: 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>向第一个 p 元素添加一个类</button>
</body>
</html>

[Empfohlenes Lernen: jquery-Video-Tutorial]

2. Verwenden Sie die css()-Methode, um den CSS-Stil festzulegen.

css()-Methode, um eine oder mehrere festzulegen oder zurückzugeben der Stilattribute der ausgewählten Elemente.

Um den Wert einer bestimmten CSS-Eigenschaft zurückzugeben, verwenden Sie bitte die folgende Syntax: 

css("propertyname");

Um eine bestimmte CSS-Eigenschaft festzulegen, verwenden Sie bitte die folgende Syntax: 

css("propertyname","value");

Beispiel: 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>
<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的背景色</button>
</body>
</html>

Das obige ist der detaillierte Inhalt vonSo fügen Sie einen CSS-Stil in JQuery hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So erhalten Sie eine Ganzzahl in jsNächster Artikel：So erhalten Sie eine Ganzzahl in js

In Verbindung stehende Artikel

Mehr sehen