Herein is the offsetHeight test, obtaining the height of an element of the page, in pixels, of the type acquired is an integer, performing digital operation.
As shown, the height of the page elements themselves include its own content + padding + border, the margin is the distance elements on the outside, it is not the height of the element itself.
As shown, a set div, and named D1, D1 up and down each of padding 50px, each of the vertical and horizontal margin 11px; left vertical border of each 10px;
final result is:
the offsetTop: 11px, which is the top margin value. Into the browser's developer mode, personal use is qq browser speed mode, div found in the top set includes a margin body of margins.
offsetLeft: 19px, left the div's margin setting is 11px, into the browser's developer mode, you can see the body have margin, is 8px, the distance to the left browser from the div is a body of margin + div own margin = 8px + 11px = 19px.
offsetWidth: div itself because no width, the width is adaptive, as the size of the browser window is changed. SUMMARY vertical width 1150px + padding50px + 50px + vertical border10px + 10px = 1270px.
offsetHeight: div itself up and down up and down border + pddding + div height in content itself, not because of their style to set the height of the div, the height and content, currently there is a word, the content height of 42px.
10px + 10px (vertical border) + 50px + 50px (vertical paddding) + 42px (height content itself) = 162px.
In IE also tested, the difference is height, because different browsers default font size default font and other different, leading to different heights content, therefore offsetHeight different.
That is offsetTop, offsetLeft is an element from the browser's margins, and margin and other margin related to the outside of the element itself .
offsetWidth, offsetHeight a border element itself, padding, the total value of the content, that is, the whole aspect of the element itself .
Test code:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WEB打印控件LODOP</title> <script language="javascript" src="LodopFuncs.js"></script> <style>#D1{background-color:#bbf1f2;padding:50px;margin:11px;border:10px solid blue;} </ Style > </ head > < body > < div ID = "Dl" > network is a hybrid deployment official Sample < br > LodopFuncs.js already written determination </ div > < A the href = "JavaScript: prn1_preview () " > click for </ A > < br > < Script Language =" JavaScript " type =" text / JavaScript " > var LODOP;// declared as global variables function prn1_preview () { varD1 = document.getElementById ( " D1 " ); the console.log ( " up and down padding 50px each of D1, the respective vertical and horizontal margin 11px; left vertical border of each 10px; " ); the console.log ( " up and down about the D1: top : " + D1.offsetTop + " , left: " + D1.offsetLeft + " , width: " + D1.offsetWidth + " , height: " + D1.offsetHeight); }; </ Script > </ body >
Icon:
