Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa lagi dengan saya pada pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery dimana kita akan membuat sebuah bentuk, dalam hal ini saya membuat sebuah kotak sebanyak 3 buah kemudian di dalamnya terdapat text DOWN lalu pada saat di klik kotak akan berpindah kebawah dan tampil text UP. Bisa teman – teman lihat pada gambar di bawah ini

Kemudian pada saat di klik salah salu kotak maka akan berpindah kebawah

Dan berganti text UP, begitupun dengan kotak yang lainnya akan bergantian bergeser ke bawah ketika di klik

Semua ini akan kita gunakan fungsi

text() = berfungsi untuk menambahkan text pada element
click() = untuk klik sebuah element
offse() = untuk melompati sebuah element
outerHeight() = untuk mengambil seluruh total height atau tinggi termasuk margin dan border

Langsung saja kita praktekkan Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery pertama – tama kita buat terlebih dahulu kotaknya

<!DOCTYPE html>
<html>
<head>
	<title><strong>Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery</strong></title>
</head>
<body>
<div>DOWN</div>
<div>DOWN</div>
<div>DOWN</div>
</body>
</html>

Kemudian masukkan style css nya

* {padding: 0; margin: 0}
div {width: 100px; height:100px;float: left; margin-right: 20px; font-size: 24px; text-align: center; line-height: 100px; cursor: pointer;border:3px solid #333; margin-bottom: 10px}
div:nth-child(1){background-color: red;}
div:nth-child(2){background-color: yellow;}
div:nth-child(3){background-color: green;}

Kemudian save dengan nama index.html, berikutnya kita load terlebih dahulu library jQuery nya

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Dan kita berikan script jQuery nya untuk menjalankan fungsi click()

var height = $('div').outerHeight(true);
$('div').click(function(){
    $('div').offset({top:0}).text('DOWN');
    $(this).offset({top:0});
    $(this).offset({top:height}).text('UP');
});

Jika sudah save dan teman – teman jalankan pada browsernya, maka penggabungan fungsi pada jQuery berhasil kita lakukan sesuai demo di atas. Baik, sekian pada artikel kali ini tentang Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery kita jumpa kembali pada artikel yang akan datang. Semoga bermanfaat dan bisa menjadi tambahan pembelajaran untuk teman – teman untuk jQuery nya, terimakasih dan sampai jumpa.

Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery

Kategori