Belajar JQuery Menambahkan CSS Dengan JQuery
Pada tutorial sebelumnya kita telah mempelajari cara-cara penggunaan effect pada JQuery, Event JQuery, menambahkan element, memanipulasi class dengan JQuery dan masih banyak lagi yang telah kita pelajari. Tetapi masih ada lagi fungsi JQuery yang tidak kalah bagus dan berguna yaitu fungsi css(). Sehingga pada tutorial Belajar JQuery Menambahkan CSS Dengan JQuery ini akan dibahas tentang pengertian dari fungsi css() dan bagaimana cara menggunakan fungsi css tersebut untuk menambahkan css pada element HTML.
Fungsi CSS() pada JQuery adalah fungsi yang disediakan untuk menambahkan atau membuat css pada element HTML. Contohnya misalnya sobat bisa menambahkan atau menyisipkan design css menggunakan fungsi css() milik JQuery. Dan cara penulisan fungsi css pada JQuery ini sangatlah mudah, caranya sama seperti penulisan fungsi jquery yang lain, yang membedakan hanya pada pengisian parameter fungsi css. Berikut ini fomat penulisan fungsi css pada JQuery.
$('element html').css("property","value");Pertama pada bagian element HTML di isikan dengan element HTML yang ingin ditambahkan syntax css. Sesuai dengan penandaan id dan classnya. Jika id dipanggil dengan tanda pagar (#),dan class di panggil dengan tanda titik (.)Kemudian di tambahkan fungsi css seperti contoh di atas, dan masukkan property yang di inginkan misalnya background, color, border, width dan lain - lain, kemudian pada bagian valuenya isikan value dari property yang kita buat. Silahkan perhatikan contoh berikut
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 12 : Menambahkan CSS Pada JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Function JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button class"tombol" id="tambah">Tambahkan CSS</button>
<div class="lingkaran"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tambah').click(function(){
$('.lingkaran').css("background","blue");
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: crimson;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
button:hover{
color: white;
background: crimson;
border: 1px solid crimson
}
.lingkaran{
border-radius: 100%;
width: 200px;
height: 200px;
background: hotpink;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.biru{
border-radius: 20%;
background: lightblue;
}
Dapat dilihat pada contoh di atas bahwa terdapat lingkaran berwarna pink, da pada saat tomol diklik kita menginginkan lingkaran tersebut berubah menjadi warna biu, Untk menambahkan css pada element lingkaran tersebut
$('#tambah').click(function(){Hanya pada tombol diklik maka element lingkaran akan berubah menjadi warna biru seperti yang sudah kita setting pada fungsi css JQuery di atas.
$('.lingkaran').css("background","blue");
});
 |
| Menambahkan CSS Dengan JQuery |
Dan bagaimana cara menambahkan banyak css pada element HTML? Perhatikan contoh berikut
CARA MENAMBAHKAN BANYAK CSS PADA ELEMENT HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 12 : Menambahkan CSS Pada JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Function JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button class"tombol" id="tambah">Tambahkan CSS</button>
<div class="lingkaran"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tambah').click(function(){
$('.lingkaran').css({"background":"blue","width":"400px","height":"400px","border":"2px solid black","transition":"0.5s"});
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: crimson;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
button:hover{
color: white;
background: crimson;
border: 1px solid crimson
}
.lingkaran{
border-radius: 100%;
width: 200px;
height: 200px;
background: hotpink;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.biru{
border-radius: 20%;
background: lightblue;
}
Perhatikan pada penulisan cara menambah banyak css dengan fungsi css() JQuery.
$('.lingkaran').css({"background":"blue","width":"400px","height":"400px","border":"2px solid black","transition":"0.5s"});per property dan value pisahkan dengan tanda koma(,) dan jangan lupa untuk menambahkan tanda kurung kurawal "{" pada awal dan tanda kurung kurawal penutul akhir "}". Karena ini berarti array dan agar synax cssnya lebih rapi sobat bisa mengubah penulisanya sebagai berikut
$('.lingkaran').css({
"background":"blue",
"width":"400px",
"height":"400px",
"border":"2px solid black",
"transition":"0.5s"
});
KESIMPULAN
Jadi dengan jQuery ini kita dapat menambahkan css dengan fungsi .css seperti yang sudah saya contohkan di atas. Untuk menambahkan banyak css kita menggunakan "{}" yang berfungsi seperti array. Yak sampai sini saja tutorial JQuery sekian terima kasih
EmoticonEmoticon