Di dalam jQuery kita dapat menambahkan CSS secara inline, maksudnya secara langsung di kode jQuerynya. Bisa dalam bentuk single key-value pair, atau dalam bentuk objek.

Keyword this di dalam javascript dan jquery merupakan keyword yang sangat banyak dipakai. Keyword ini digunakan untuk menentukan elemen mana yang berinteraksi dengan user, dengan referensi ke elemen yang menjadi target sebelumnya. Kita lihat contohnya :

index.html

jquery_styling.js

style.css

Result

Pada jquery_styling.js terlihat bahwa elemen heading h4 dapat diberikan method css(“color”, “red”). Otomatis akan berwarna merah. Method css juga dapat diberikan parameter berupa object yang berisi pasangan key-value:

Contoh penggunaan keyword this bisa dilihat pada kode ini :

Ketika tombol button di klik, maka paragraf akan ditambahkan class beautify yang berada di style.css. Terdapat keyword this disitu. Keyword this tersebut refer kepada elemen di atasnya, yaitu button, sehingga ketika salah satu button yang di klik, hanya button yang di klik saja yang berubah. Yang tidak di klik tidak akan berubah. Saat button diklik dua kali, hanya button itu saja yang berubah dan memiliki class blue_border.

Kode js di atas juga prinsipnya sama. This refer ke elemen paragraf (p). Ketika paragraf yang di klik, maka paragraf itu saja yang berubah, yang tidak di klik tidak akan berubah. Itulah gambaran fungsi dari keyword this.