資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 AngularJS 動態獲取 div 元素的內容高度？
在本文中，我們將探討如何使用 AngularJS 及其 getContentHeight() 函式動態獲取 <div> HTML 元素的內容高度。
在 Web 開發中，我們經常需要根據內容動態確定 <div> 元素的高度。藉助流行的 JavaScript 框架 AngularJS 及其提供的各種實用函式，我們可以輕鬆實現這一點。
讓我們透過一些示例來了解如何實現上述功能。
示例 1
在這個示例中，我們將向 <div> 元素新增 ng-init="getContentHeight()"，它會在內容初始載入時呼叫 getContentHeight() 函式。我們還將在 getContentHeight() 函式中新增 console.log()，以便在控制檯中顯示 <div> 的高度。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically get the content height of a div using AngularJS?</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h3>How to dynamically get the content height of a div using AngularJS?</h3>
<div id="myDiv" ng-style="divStyle" ng-init="getContentHeight()">
<!-- Content goes here -->
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas, tempore temporibus, similique laudantium, incidunt aspernatur eos voluptatum architecto quod ad sequi voluptatem ratione dolores enim? Minus fugit numquam laborum ab.
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.divStyle = { height: 'auto' }; // Initial height set to 'auto'
// Function to get the content height dynamically
$scope.getContentHeight = function() {
const divElement = document.getElementById('myDiv');
$scope.divStyle.height = divElement.offsetHeight + 'px';
console.log('Content height:', divElement.offsetHeight, 'px');
};
}]);
</script>
</body>
</html>
示例 2
在這個示例中，我們將遵循上述程式碼模式，並使用兩種不同的方法（使用 $scope.$watch 和 document.querySelector 以及 $timeout）在控制檯中顯示 div 元素的高度。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically get the content height of a div using AngularJS?</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h3>How to dynamically get the content height of a div using AngularJS?</h3>
<div id="myDiv" ng-style="divStyle" ng-init="getContentHeight()">
<!-- Content goes here -->
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas, tempore temporibus, similique laudantium, incidunt aspernatur eos voluptatum architecto quod ad sequi voluptatem ratione dolores enim? Minus fugit numquam laborum ab.
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', '$element', '$timeout', function($scope, $element, $timeout) {
$scope.divStyle = { height: 'auto' }; // Initial height set to 'auto'
// Example 1: Using $scope.$watch
$scope.$watch(function() {
const divElement = $element[0].querySelector('#myDiv');
return divElement.offsetHeight;
}, function(newHeight) {
$scope.divStyle.height = newHeight + 'px';
console.log('Content height Using $scope.$watch:', newHeight, 'px');
});
// Example 2: Using document.querySelector and $timeout
$scope.getContentHeight = function() {
$timeout(function() {
const divElement = document.querySelector('#myDiv');
$scope.divStyle.height = divElement.offsetHeight + 'px';
console.log('Content height Using document.querySelector and $timeout:', divElement.offsetHeight, 'px');
});
};
}]);
</script>
</body>
</html>
結論
總而言之，可以使用 AngularJS 的指令和控制器函式來動態獲取 <div> 元素的內容高度。我們探討了兩個示例來說明如何實現此功能。第一個示例演示瞭如何使用 console.log() 函式在控制檯中顯示 <div> 的高度。第二個示例展示瞭如何藉助 $scope.$watch 和 document.querySelector 以及 $timeout 來顯示內容高度。
更新於： 2023年8月3日
836 次瀏覽
廣告