Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery
Halo Dumenity, selamat datang kembali di situs tips dan trik Source Code Aplikasi. Berjumpa lagi dengan saya di pembahasan tips dan trik seputar dunia situs, di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery dimana kita akan membangun sebuah format, pada hal ini saya membangun sebuah kotak sebanyak 3 buah kemudian di dalamnya terdapat text DOWN lalu di dikala di klik kotak akan berpindah kebawah dan tampil text UP. Dapat teman – teman lihat di gambar di bawah ini
Kemudian di dikala di klik salah salu kotak karenanya akan berpindah kebawah
Dan berganti text UP, begitupun dengan kotak yang lainnya akan bergantian bergeser ke bawah ketika di klik
Segala ini akan kita gunakan manfaat
- text() = berfungsi bagi menambahkan text di element
- click() = bagi klik sebuah element
- offse() = bagi melompati sebuah element
- outerHeight() = bagi mengambil seluruh total height atau tinggi termasuk margin dan border
Seketika saja kita praktekkan Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery pertama-tama – tama kita bikin terlebih dahulu kotaknya
<!DOCTYPE html>
<html>
<head>
<title><strong>Cara Kombinasi Guna outerHeight, offset dan text Di 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 bagi menjalankan manfaat 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');
});Jikalau telah save dan teman – teman jalankan di browsernya, karenanya penggabungan manfaat di jQuery berhasil kita lakukan sesuai demo di atas. Bagus, demikian di artikel kali ini mengenai Cara Kombinasi Fungsi outerHeight, offset dan text Pada jQuery kita jumpa kembali di artikel yang akan datang. Semoga bermanfaat dan dapat menjadi tambahan pembelajaran bagi teman – teman bagi jQuery nya, terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
