jQuery - Dimensi
Dengan jQuery, mudah untuk bekerja dengan dimensi elemen dan jendela browser.
Metode Dimensi jQuery
jQuery memiliki beberapa metode penting untuk bekerja dengan dimensi:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Dimensi jQuery
Lebar jQuery () dan tinggi () Metode
Metode width()ini menetapkan atau mengembalikan lebar elemen (tidak termasuk padding, border, dan margin).
Metode height()ini menetapkan atau mengembalikan tinggi suatu elemen (tidak termasuk padding, border, dan margin).
Contoh berikut mengembalikan lebar dan tinggi <div>
elemen tertentu:
Contoh
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Metode jQuery innerWidth() dan innerHeight()
Metode innerWidth()mengembalikan lebar elemen (termasuk bantalan).
Metode innerHeight()mengembalikan ketinggian elemen (termasuk padding).
Contoh berikut mengembalikan lebar/tinggi bagian dalam dari <div>
elemen tertentu:
Contoh
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() dan outerHeight() Metode
Metode outerWidth()mengembalikan lebar elemen (termasuk padding dan border).
Metode outerHeight()mengembalikan ketinggian elemen (termasuk padding dan border).
Contoh berikut mengembalikan lebar/tinggi luar dari <div>
elemen tertentu:
Contoh
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Metode outerWidth(true)ini mengembalikan lebar elemen (termasuk padding, border, dan margin).
Metode outerHeight(true)ini mengembalikan ketinggian elemen (termasuk padding, border, dan margin).
Contoh
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Lebih lebar() dan tinggi()
Contoh berikut mengembalikan lebar dan tinggi dokumen (dokumen HTML) dan jendela (browser viewport):
Contoh
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
Contoh berikut menetapkan lebar dan tinggi <div>
elemen tertentu:
Contoh
$("button").click(function(){
$("#div1").width(500).height(500);
});
Latihan jQuery
Referensi CSS jQuery
Untuk gambaran lengkap tentang semua metode CSS jQuery, silakan kunjungi Referensi HTML/CSS jQuery kami .