This is the fourth day of my participation in the August Text Challenge.More challenges in August

The javascript method for getting the height and width of a DOM element is as follows:

Page visible area width:document.body.clientWidth Height of the visible area of the page:document.body. ClientHeight Page visible area width:document.body.offsetwidth (including the width of the border) height of the visible area of the page:document.body.offsetheight (including the height of the edge)document.body.scrollWidthdocument.body.scrollHeight The height of the page being rolled:documentThe.body.scrollTop page is rolled to the left:documentThe width and height of the dom element corresponding to.body.scrollLeft are commonly used as follows:document.getElementById("div"The actual width of the.offsetheight element:document.getElementById("div").offsetwidth The actual distance to the left edge of the element:document.getElementById("div").offsetLeft The actual distance of the element from the upper boundary:document.getElementById("div").offsetTop
Copy the code

JQuery to get screen height:

$(document).ready(function(){

alert($(window).height()); // The height of the viewable area of the current browser window

alert($(document).height()); // The height of the document in the browser's current window

alert($(document.body).height());// The height of the body of the browser's current window document

alert($(document.body).outerHeight(true));// The total height of the body of the browser's current window document includes the border padding margin

alert($(window).width()); // The width of the current viewable area of the browser window

alert($(document).width());// The width of the document object in the browser's current window

alert($(document.body).width());// The width of the body of the browser's current window document

alert($(document.body).outerWidth(true));// The total width of the body of the browser's current window document includes the border padding margin
})
Copy the code

To sum up, JS gets the height and width of a DOM element as follows:

The actual height of the element:document.getElementById("div"The actual width of the.offsetheight element:document.getElementById("div").offsetwidth The actual distance to the left edge of the element:document.getElementById("div").offsetLeft The actual distance of the element from the upper boundary:document.getElementById("div").offsetTop
Copy the code

Listen for browser window changes

If you need to perform some actions based on window changes (for example, dom height needs to be adjusted based on window changes), you can combine the following methods:

// Listen for window changes
window.onresize = () = >{
    // Print browser width and height
    console.log(document. Body. ClientWidth'==> BODY object width ')console.log(document. Body. ClientHeight'==> BODY object height ')console.log(document. The documentElement. ClientWidth,'==> Width of visible area ')console.log(document. The documentElement. ClientHeight,'==> Visible area height ')}Copy the code

We sometimes need to calculate the height of a DOM dynamically and then ensure that a page can display all DOM elements, so we need to be familiar with the definition of these heights. And how to use it.