jQuery | height() und innerHeight() mit Beispielen
Die Höhe() ist eine eingebaute Methode in jQuery, die verwendet wird, um die Höhe eines Elements zu überprüfen, aber nicht die Auffüllung, den Rand und den Rand des Elements.
Syntax:
$("param").height()
Parameter: Diese Funktion akzeptiert keine Parameter.
Rückgabewert: Gibt die Höhe des ausgewählten Elements zurück.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var msg = "";
msg += "height of div: " + $("#demo").height();
$("#demo").html(msg);
});
});
</script>
<style>
#demo {
height: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="demo"></div>
<button>Click Me!!!</button>
<p>Click on the button and check the height of the
element(excluding padding).</p>
</body>
</html>
Ausgabe:
Vor dem Klicken auf die Schaltfläche „Click Me“ – 
Nach dem Klicken auf die Schaltfläche „Click Me“ –
jQuery enthält auch die Methode innerHeight() , dh sie wird verwendet, um die innere Höhe des Elements einschließlich Polsterung zu überprüfen.
Syntax:
$("param").innerHeight()
Parameter: Diese Funktion akzeptiert keine Parameter.
Rückgabewert: Gibt die innere Höhe des ausgewählten Elements zurück.
Code Nr. 2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var msg = "";
msg += "Inner Height of div: " + $("#demo").
innerHeight() + "</br>";
$("#demo").html(msg);
});
});
</script>
</head>
<style>
#demo {
height: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightgreen;
}
</style>
<body>
<div id="demo"></div>
<button>Click Me!!!</button>
<p>Click on the button and check the innerHeight of
an element(includes padding).</p>
</body>
</html>
Ausgabe:
Vor dem Klicken auf die Schaltfläche „Click Me“ – 
Nach dem Klicken auf die Schaltfläche „Click Me“ –