Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Javascript Dan JQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery
link : Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery

Baca juga


Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery

Pada kesempatan kali ini kita akan mencoba cara bagaimana kita mengganti sebuah class pada tag HTML dengan bantuan framework javascript yaitu JQuery.
Pada kasus ini kita akan membuat 2 buah kelas, kelas pertama membuat font menjadi warna merah dan kelas kedua membuat font menjadi warna hitam.


1. Buatlah tag HTML nya

<div class="toggler">
  <div id="effect" class="newClass">
      Ini adalah tulisan yang akan berganti warna dan ukurannya
  </div>
</div>
<button id="button">Start</button>
 2. Buat style CSS nya

.newClass {
  font-size : 12px;
  color:#000000;
}

.anotherNewClass {
  font-size : 16px;
  color:red;
}

3. Buat sintak Jquery nya

$( function() {
    $( "#button" ).on( "click", function() {
      $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
      $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
    });
  } );

 4. Jangan lupa sertakan link js dan style nya seperti berikut pada tag header html,

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


 5. Berikut script keseluruhannya

<html>
<head>
<title>Test switch class</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> 
$( function() {
    $( "#button" ).on( "click", function() {
      $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
      $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
    });
  } );
</script>
<style>

.newClass {
  font-size : 12px;
  color:#000000;
</style>
</head>
 <body>
<div class="toggler">
  <div id="effect" class="newClass">
      Ini adalah tulisan yang akan berganti warna dan ukurannya
  </div>
</div>
<button id="button">Start</button>
</body>
</html>

 
Untuk melihat demo bisa langsung masuk ke link Berikut 

Semoga bermanfaat..


Demikianlah Artikel Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery

Sekianlah artikel Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mengganti Class (Switch Class) Pada Tag HTML Dengan JQuery dengan alamat link https://dev-create.blogspot.com/2016/12/mengganti-class-switch-class-pada-tag.html