JS trivia and some common confusing points of knowledge

1.offsetleft = integer (can be positive or negative). If it is a floating-point number, it is always rounded down

=90px, because there are no decimals in the pixels, the integers are discarded automatically, showing the rounding down

2. Differences
Assume:
body{
height:2000px
}
function GetInfo ()
{
var s = "";
s + = "page visible Area High:" + document.body.clientheight;--visible height is 2000px, indicating all visible height

s + = "page visible area width:" + document.body.offsetWidth + "(including Edge and scroll bar width)";

s + = "page body Full text width:" + document.body.scrollWidth;
s + = "page body full text High:" + document.body.scrollHeight;
s + = "page is rolled high (FF):" + document.body.scrollTop;
s + = "page is rolled high (ie):" + document.documentElement.scrollTop;
s + = "page is rolled away left:" + document.body.scrollLeft;
s + = "page body part:" + window.screentop;
s + = "page body part left:" + window.screenleft;
s + = "screen resolution High:" + window.screen.height;
s + = "screen resolution width:" + window.screen.width;
s + = "screen available working area height:" + window.screen.availHeight;
s + = "screen available working area width:" + window.screen.availWidth;
s + = "Your screen settings are" + window.screen.colorDepth + "bit color";
s + = "your screen settings" + Window.screen.deviceXDPI + "pixels/inch";
}


Various widths:
1. In CSS, the box model of the Web page, Width: is not included padding border margin
In JS, Offsetwidth:width+padding+border;
Clientwidth:width + padding (varies with browser size)

So in JS use offsetwidth carefully, because once the layout changes, the function will change, and Obj.style.width is the width of the CSS alone;
Example: In the motion frame, the border causes the div width change to be very troublesome

3.js Events
Distinguishing mouse events: onmouseover (mouse-over events) and onmouseout (mouse-out events)

JS trivia and some common confusing points of knowledge