資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 動態設定 div 元素的高度和寬度？
在本文中，我們將學習如何使用 jQuery 及其方法（如 height() 和 width()）動態設定 div 元素的高度和寬度。
在 Web 開發中，經常會遇到需要根據某些條件或使用者互動動態調整 <div> 元素的高度和寬度的場景。我們可以使用流行的 JavaScript 庫 jQuery 輕鬆實現這一點。
讓我們透過一些示例瞭解如何實現這一點。
示例 1
在本例中，我們將使用 height() 和 width() jQuery 方法，在文件掛載並渲染時動態設定 div 容器的高度和寬度。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically set the height and width of a div element using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#myDiv {
background-color: #ccc;
border: 1px solid #000;
}
</style>
</head>
<body>
<h3>How to dynamically set the height and width of a div element using jQuery?</h3>
<div id="myDiv">
</div>
<script>
$(document).ready(function() {
const divElement = $("#myDiv");
divElement.height(200); // Set the height to 200 pixels
divElement.width(300); // Set the width to 300 pixels
});
</script>
</body>
</html>
示例 2
在本例中，我們將遵循上述程式碼模式，並使用三種不同的方法更改 div 容器的高度和寬度：使用 attr 方法將高度和寬度設定為 200px 和 300px，使用 height 和 width 屬性將高度和寬度設定為 100px 和 200px，以及使用 jQuery 的 animate 方法將高度和寬度分別設定為 300px 和 400px。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically set the height and width of a div element using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#myDiv {
background-color: #ccc;
border: 1px solid #000;
}
</style>
</head>
<body>
<h3>How to dynamically set the height and width of a div element using jQuery?</h3>
<button onclick="setDimensionsAttr()">Set Dimensions Using the attr method</button>
<button onclick="setDimensionsProp()">Set Dimensions Using height and width property</button>
<button onclick="setDimensionsAnimate()">Set Dimensions Using animate method</button>
<div id="myDiv">
</div>
<script>
const divElement = $("#myDiv");
function setDimensionsAttr() {
// Example 1: Using the attr jQuery method
divElement.attr('style', 'height: 200px; width: 300px;');
}
function setDimensionsProp() {
// Example 2: Using height and width jQuery property
divElement.height(100); // Set the height to 100 pixels
divElement.width(200); // Set the width to 200 pixels
}
function setDimensionsAnimate() {
// Example 3: Using animate jQuery method
divElement.animate({ height: '300px', width: '400px' }, 'slow');
}
</script>
</body>
</html>
結論
總之，使用 jQuery 動態設定 <div> 元素的高度和寬度提供了一種靈活且有效的方法來根據特定條件或使用者互動調整尺寸。藉助以上示例，我們學習瞭如何使用 height() 和 width()、attr() 以及 animate() jQuery 方法動態設定 HTML 元素的高度和寬度。
更新於： 2023年8月3日
534 次瀏覽
廣告