Dengan jQuery, kita bisa lebih mudah untuk bekerja dengan dimensi elemen dan jendela browser.
Section Artikel
Metode Dimensi jQuery
jQuery memiliki beberapa metode penting untuk bekerja dengan dimensi:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Dimensi jQuery
Metode jQuery width () dan height ()
Metode width() mengatur atau mengembalikan lebar elemen (tidak termasuk padding, border dan margin).
Metode height() menyetel atau mengembalikan tinggi elemen (tidak termasuk padding, border, dan margin).
Contoh berikut mengembalikan lebar dan tinggi dari elemen yang ditentukan:
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var txt = ""; txt += "Width of div: " + $("#div1").width() + "</br>"; txt += "Height of div: " + $("#div1").height(); $("#div1").html(txt); }); }); </script> <style> #div1 { height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue; } </style> </head> <body> <div id="div1"></div> <br> <button> Menampilkan dimensi div </button> <p> width () - mengembalikan lebar elemen. </p> <p> height () - mengembalikan tinggi elemen. </p> </body> </html>
Metode jQuery innerWidth () dan innerHeight ()
Metode innerWidth() mengembalikan lebar elemen (termasuk padding).
Metode innerHeight() mengembalikan tinggi elemen (termasuk bantalan).
Contoh berikut mengembalikan lebar dalam / tinggi dari elemen <div> yang ditentukan:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button> Menampilkan dimensi div </button>
<p> width () - mengembalikan lebar elemen. </p>
<p> height () - mengembalikan tinggi elemen. </p>
</body>
</html>
Metode jQuery outerWidth () dan outerHeight ()
Metode outerWidth() mengembalikan lebar elemen (termasuk padding dan border).
Metode outerHeight() mengembalikan tinggi elemen (termasuk padding dan border).
Contoh berikut mengembalikan outer-width / height dari elemen <div> yang ditentukan:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
<body>
<div id="div1"></div>
<br>
<button> Menampilkan dimensi div </button>
<p> innerWidth () - mengembalikan lebar elemen (termasuk padding). </p>
<p> innerHeight () - mengembalikan tinggi elemen (termasuk padding). </p>
</body>
</html>
Metode outerWidth(true) mengembalikan lebar elemen (termasuk padding, border, dan margin).
Metode outerHeight(true) mengembalikan tinggi elemen (termasuk padding, border, dan margin).
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button> Menampilkan dimensi div </button>
<p> outerWidth (true) - mengembalikan lebar elemen (termasuk padding, border, dan margin). </p>
<p> outerHeight (true) - mengembalikan tinggi elemen (termasuk padding, border, dan margin). </p>
</body>
</html>
jQuery Lebih width() dan height()
Contoh berikut mengembalikan lebar dan tinggi dokumen (dokumen HTML) dan jendela (area pandang browser):
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("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);
});
});
</script>
</head>
<body>
<button>Dimensi tampilan dokumen dan jendela</button>
</body>
</html>
Contoh berikut menetapkan lebar dan tinggi elemen yang ditentukan:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(500).height(500);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Resize div</button>
</body>
</html>
