Belajar CSS, Manipulasi CSS Dengan jQuery

Belajar Pemula CSS dan cara Manipulasi CSS dengan jQuery.

Cara pemula belajar manipulasi CSS dengan jQuery.
Berikut cara-cara pemula belajar manipulasi CSS.

jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi

- $(selector).css(name,value)

- $(selector).css({properties})

- $(selector).css(name)

Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties}. Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.

Berikut kita coba untuk pelatihan pertama Contoh css() method

Sebelumnya jangan lupa file jquery-2.1.0.min.js berada pada folder yang sama.

Untuk yang belum ada dile jquery bisa langsung di Download di sini !!

Dan jika di situ tidak bisa mencarinya, bisa juga di Download di sini !!

Baca Juga : Belajar jQuery Untuk Pemula.

Tuliskan sintak dibawah ini dan simpan dengan nama csslat3.css, boleh juga dengan nama lain sesuai yang kita mau dan gampang di ingat, tapi jangan lupa dengan nama CSS nya yang ada di belakang yang kita buat.

.p1 {

color: white; font-size:18px; background-color:#000}

.p2 {

color: blue; font-family:Verdana, Geneva, sans-serif }

Tuliskan sintak dibawah ini dan simpan dengan nama cssmethod.php

<html>

<head>

<LINK REL="STYLESHEET" TYPE="text/css" HREF="csslat3.css">

<script src="jquery-2.1.0.min.js">

</script>

<script type="text/javascript">

$(document).ready(function(){

$("#tombol1").click(function(){

$(".p1").css("color","red");

$(".p2").css({"color":"green","font-family":"Arial","fontsize":"20px","padding":"5px"});

});

});

</script>

</head>

<body>

<p class="p1">Paragraf satu </p>

<p class="p2">Paragraf dua</p>

<button id="tombol1">ubah CSS paragraf</button>

</body>

</html>