Pada sintaks jQuery juga dapat ditambahkan method addClass(), removeClass() dan toggleClass().
Langkah 1 : Menghubungkan file html dengan CSS
Hubungkan file html dengan css menggunakan
|
1 |
<link rel="stylesheet" type="text/css" href="css/style.css"> |
|
1 2 3 4 5 |
<div> <p>Ini adalah sebuah paragraf</p> <p> Ini juga</p> <h4> Jangan lupa yang ini! </h4> </div> |
Buat folder css dan isikan dengan style.css, isinya adalah memberikan class colorful dan timestwo. Class colorful akan membuat tulisan menjadi berwarna pink , timestwo akan membuat tulisan besarnya dua kali lipat.
|
1 2 3 4 5 6 7 |
.timestwo { font-size: 2em; } .colorful { color: pink; } |
Langkah 2 : Menambahkan javascript di akhir halaman
Untuk menargetkan class html, kita menggunakan tanda titik (“.”), untuk menargetkan id elemen html kita menggunakan tanda pagar (“#”), sedangkan untuk menargetkan elemen, kita tidak perlu menambahkan titik atau tanda pagar (“”).
|
1 2 3 4 5 |
<script> $("p").hide(); $("h4").addClass("colorful timestwo"); $("h4").removeClass("timestwo"); </script> |
Disini, ketika halaman dibuka, elemen paragraf akan disembunyikan. Kemudian heading 4 akan diberikan class CSS yaitu colorful dan juga timestwo yang berada di file style.css. Setelah itu, kita menggunakan removeClass untuk menghapus class timestwo, sehingga yang bersisa adalah tulisan heading yang berwarna pink saja.
