screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head></head> <body> <div id="myElement"> <h3>Javascript Get Element width including Padding and Border</h3> <p> fontawesomeicons.com</p> </div> <p id="height"></p> <button id="updateButton">Get Element Width</button> <script> // Function to update dimensions function updateDimensions() { // Get the element by its ID var element = document.getElementById("myElement"); var width = element.offsetWidth; var widthElement = document.getElementById("height"); widthElement.textContent = `Width: ${width}`; } document.getElementById("updateButton").addEventListener("click", function () { updateDimensions(); }); </script> <style> #myElement { font-family: 'FontAwesome', Arial, sans-serif; background-color: #f2f2f2; padding: 10px; border-radius: 5px; text-align: center; } #dimensions { font-family: Arial, sans-serif; margin-top: 10px; } #height, #width { font-weight: bold; } </style> </body> </html>