Heim > Web-Frontend > js-Tutorial > So fügen Sie JS einen CSS-Stil hinzu

So fügen Sie JS einen CSS-Stil hinzu

藏色散人
Freigeben: 2023-01-06 11:13:36
Original
12484 Leute haben es durchsucht

So fügen Sie einen CSS-Stil in js hinzu: 1. Fügen Sie einen Stil über „$(“span“).css(“css attribute name“, „attribute value“)“ hinzu. 2. Fügen Sie einen CSS-Stil über den Methodenstil „addClass()“ hinzu .

So fügen Sie JS einen CSS-Stil hinzu

Die Betriebsumgebung dieses Artikels: Windows7-System, JQuery3.2.1 und CSS3-Version, Dell G3-Computer.

js fügt CSS-Stile hinzu:

Da JQuery CSS3 unterstützt, ist es mit vielen Browsern gut kompatibel. Daher ist es besser, CSS-Stile über JQuery zu verwenden.

  • JS-Methode zum Hinzufügen eines CSS-Stils

Wenn der CSS-Stil nicht definiert ist, können Sie die CSS()-Methode des Elements aufrufen, um den Stil hinzuzufügen.

$("span").css("css属性名","属性值")
Nach dem Login kopieren

Beispiel: Setzen Sie die Schriftarten mit der Bezeichnung span auf rot

$("span").css("color","red")
Nach dem Login kopieren

Wenn es sich um einen definierten CSS-Stil handelt, können Sie ihn über die addClass()-Methode hinzufügen, z. B.

<style type="text/css">
   .aa {
        border:1px solid red;
    }
</style>
  
$("#txtName").addClass("aa");
<input id="txtName"type="text"value="请输入你的姓名"/>
Nach dem Login kopieren
  • So bedienen Sie den CSS-Stil:

1、.css("样式"):获得样式值,比如$("input").css("color") 获得input中字体的颜色
2、.css("样式","value"):为样式赋值,如$("input").css("color","red");
3、.addClass("样式类1,样式类2,样式类3"):可以添加多个定义好的样式类
4、.hasClass("样式类类"):判断是否存在该样式
5、.toggleClass("样式类"):如果存在(不存在)就切换(删除)样式
6、.toggleClass("样式类",swith):如果swith为false,则删除样式,如果swith为true,则切换成该类
7、removeClass("样式类"):移除样式类
8、.css({样式名:"value",样式名:"value",样式名:"value"}):可以多次添加样式
Nach dem Login kopieren

Empfohlenes Lernen: „Javascript-Tutorial für Fortgeschrittene

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

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