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()
jQuery Dimensi
jQuery width() dan height() Metode
The width() metode set atau mengembalikan lebar elemen (tidak termasuk padding, border dan margin ).
The height() metode set atau mengembalikan ketinggian elemen (tidak termasuk padding, border dan margin ).
Contoh berikut mengembalikan lebar dan tinggi dari yang ditentukan <div> elemen:
Contoh
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Cobalah sendiri " jQuery innerWidth() dan innerHeight() Metode
The innerWidth() metode mengembalikan lebar elemen (termasuk padding ).
The innerHeight() metode mengembalikan ketinggian elemen (termasuk padding ).
Contoh berikut mengembalikan batin-lebar / tinggi dari yang ditentukan <div> elemen:
Contoh
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Cobalah sendiri " jQuery outerWidth() dan outerHeight() Metode
The outerWidth() metode mengembalikan lebar elemen (termasuk padding dan border ).
The outerHeight() metode mengembalikan ketinggian elemen (termasuk padding dan border ).
Contoh berikut mengembalikan outer-lebar / tinggi dari yang ditentukan <div> elemen:
Contoh
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Cobalah sendiri " The outerWidth(true) metode mengembalikan lebar elemen (termasuk padding, border , dan margin ).
The outerHeight(true) metode 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);
}); Cobalah sendiri " jQuery Lebih width() dan height()
Contoh berikut mengembalikan lebar dan tinggi dari 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);
}); Cobalah sendiri " Contoh berikut menetapkan lebar dan tinggi dari yang ditentukan <div> elemen:
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
jQuery CSS Referensi
Untuk gambaran lengkap dari semua metode jQuery CSS, silahkan ke kami Referensi / CSS jQuery HTML .