screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> <style> .container { max-width: 500px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .container h3 { font-size: 24px; margin-bottom: 20px; } </style> </head> <body> <div ng-app="myApp" ng-controller="myController" class="container" ng-init="getElementDimensions()" > <div id="myElement" style="border: 1px solid green"> <h3>Angular Js Get Element Height and Width</h3> <p>Height: {{ height }}px</p> <p>Width: {{ width }}px</p> </div> </div> <script> angular .module("myApp", []) .controller("myController", function ($scope, $element) { $scope.getElementDimensions = function () { // Get the element by its ID or any other selector var element = $element[0].querySelector("#myElement"); // Get the height and width of the element var height = element.offsetHeight; var width = element.offsetWidth; $scope.height = height; $scope.width = width; }; }); </script> </body> </html>