JS in offset, scroll, client

--- --- restore content begins

Use of offset

css section

*{
            margin:0;
            padding: 0
        }
        #offset{
            width: 100px;
            height:100px;
            padding:20px;
            background: red;
            margin-top:30px;
        }
        #fixed{
            position: absolute;
            right:100px;
            top:200px;
            width: 200px;
            height: 200px;
            background: black;
        }

html part

<div id="fixed">
        <div id="center" style="height:140px;width: 140px">
            <div id="offset"></div>
        </div>
    </div>

javascript and explain

var offset = document.querySelector ( "offset #"); // detecting cassette itself + padding + border width and height does not include margin offset: offset compensation, the displacement of 
    the console.log (offset.offsetWidth); 
    the console.log (offset. the offsetTop); // distance and the offsetTop offsetLeft (detection from the parent cassette positioning the left / upper) positioned regardless of the presence or absence and the box itself. 
    console.log (offset.offsetParent); // should return Fixed 
    // the offsetParent taken recently that have positioned parent element. If no return element body 
    // difference between the two 
    // (. 4) and style.left difference offsetLeft 
    / * ① offsetLeft biggest difference is not positioned can return position from the left of the box. The style.left not. 
    ② offsetLeft number is returned, and return a string style.left, except figures with further units: px. 
    ③ offsetTop read-only, read-write and style.top. (Read-only value is to obtain, can write an assignment)
    ④ If no HTML elements of the specified style over top, then style.top returns an empty string. 
    (Style.left on the left and right of the equal sign is not the same. The left is when property is the right time to value.) * /

 

 

effect

 

 div#fixed

 

div#center

 

div#offset

 

 

Console effect

 

 

 

 

 Compatibility Issues

var Scroll = document.getElementById ( "Scroll" ); 
    the setInterval ( function () {
         // var AAA document.documentElement.scrollTop || = || window.pageYOffset document.body.scrollTop;   
var AAA + = document.documentElement.scrollTop document.body.scrollTop;   
console.log (aaa); 
        console.log (document.body.scrollTop); 
    }, 3000 ;) 



when ① DTD undeclared (Google only know him) 
document.body.scrollTop 
when ② has stated DTD (IE678 known only to him) 
document.documentElement.scrollTop 
③ Firefox / Google / ie9 + more supported 
window.pageYOffset

client use

    // Client series 
    // get the page 
    var the Scroll = document.getElementById ( "the Scroll" ); 
    console.log (scroll.clientWidth); //   clientWidth = width + padding around, without borders and padding 
    // clientTop = boder.top ( border width) 
    the console.log (scroll.clientTop); // margin width

(2) the clientX and clientY

clientX: mouse away from the visible area of ​​the left (event calls)

clientY: mouse away from the visible side area (event calls)

 

 

event event object

Ordinary browser supports event (with a reference, any parameter)

ie 678 support window.event (no parameters, built-in)

IE678 in, window.event 

In Firefox in Google, event or, in the event binding function, add a reference, this parameter is the event.

  Box.onclick = function (aaa) {aaa is event}

 

important content

 

 

pageY / pageX: mouse at the top and from the left side portion of the entire web page. (page)

pcreenY / screenX: mouse at a distance above and on the left side of the screen. (screen)

clientX / clientY: mouse is from the left side and top of the browser. (Browser size and position)

 

    = document.body.onclick function (Event) {
         var S = Event; 
        the console.log ( "page" + s.pageY); // get the distance from the page 
        console.log ( "screen" + s.screenY); // get the browser distance above 
        console.log ( "screen" + s.clientY); 
    }

 

Readers can run the above code assignment down to look at the proposed first Liu pulled up the window to see the maximum effect of the browser window again reduced at this time of the second page of results to changes in the relative and the viewer does not occur Variety