Belajar Jquery Part 6 : Menambah Css Di jQuery
Belajar Menambah Css di jQuery
Fungsi CSS() pada JQuery adalah fungsi yang disediakan untuk menambahkan atau membuat css pada element HTML. Contohnya misalnya anda 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.
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.
Fungsi CSS() pada JQuery adalah fungsi yang disediakan untuk menambahkan atau membuat css pada element HTML. Contohnya misalnya anda 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 color , background dan lain - lain, kemudian pada bagian valuenya isikan value dari property yang kita buat. Silahkan perhatikan contoh berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 6 : Menambahkan CSS Di JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{
font-family: raleway;
}
a {
color: green;
}
a:hover{
color: blue;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: green;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: black;
background: lime;
border: 1px solid green;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
}
button:hover{
color: white;
background: green;
border: 1px solid lime;
}
.lingkaran{
border-radius: 4%;
width: 200px;
height: 200px;
background: lime;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.biru{
border-radius: 20%;
background: lightblue;
}`
</style>
</head>
<body>
<h1>Belajar menambahkan Css di jQuery<br>
<a href="http://www.bimablctelkom.com">Bima Blc Telkom</a></h1>
<center>
<button class"tombol" id="tambah">Tambahkan CSS</button>
<div class="lingkaran"></div>
</center>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tambah').click(function(){
$('.lingkaran').css("background","blue");
});
});
</script>
</html>
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.
No comments