Heim > Artikel > Web-Frontend > So ändern Sie die Div-Höhe mithilfe von JQuery
So ändern Sie die Div-Höhe mithilfe von JQuery
- 青灯夜游Original
- 2022-05-17 19:01:454183Durchsuche
3 Methoden: 1. Verwenden Sie „$(“div“).height(height value)“, um einen neuen Höhenwert festzulegen. 2. Verwenden Sie „$(“div“).css(“height“, „height value“; )“, fügen Sie einen neuen Höhenstil hinzu; 3. Verwenden Sie „$(“div“).attr(“style“,“height:value“)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.2.1-Version, Dell G3-Computer.
Es gibt viele Möglichkeiten, die Höhe von Elementen in jquery zu ändern:
height()
css()
attr()
1 div Height ändern
height() Methode kann die Höhe übereinstimmender Elemente festlegen. Syntax:
$("div").height(高度值)Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function() {
$("div").height("30px");
});
$("#but2").click(function() {
$("div").height("100px");
});
});
</script>
<style>
div{
height: 60px;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div>
一个div元素，高度60px
</div>
<br>
<button id="but1">减小div高度</button>
<button id="but2">增大div高度</button>
</body>
</html>
2. Verwenden Sie css(), um die Div-Höhe zu ändern
Verwenden Sie css(), um dem td-Element einen Höhenstil hinzuzufügen zum Beispiel für Methode 1: Ändern Sie
3. Verwenden Sie attr(), um die Div-Höhe zu ändern.
Verwenden Sie attr(), um den Stilattributwert zu steuern und den Höhenstil zum td-Element hinzuzufügen. Syntax:
$("div").css("height","高度值");Beispiel: Ändern Sie $(document).ready(function() {
$("button").click(function() {
$("div").css("height","40px");
});
});
auf der Grundlage des Beispiels für Methode 1 [Empfohlenes Lernen: 
jQuery-Video-Tutorial
Web-Frontend-Video]
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Div-Höhe mithilfe von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!