About the difference between the offsetTop and clientX and pageX

.. $ ( '. Con') offset () top; // jq the offset () relative to the viewport

var con = document.getElementsByClassName('con')[0];

// console.log (con.offsetTop); // if there is a parent native JS positioning, relative to the parent, if the parent no orientation, with respect to the viewport

// console.log (con.offsetWidth); // in native JS content of the element is offsetWidth + padding + border

// console.log (con.style.width); // native JS can only get between the lines of the element width value for the style, if you can not get the introduction of css style width value, and the value of the set is only set between lines style on

// console.log (con.clientWidth); // in native JS clientWidth = content + padding value and, similarly cilentHeight

// con.addEventListener('mouseenter', function(e) {

// // console.log (e.clientX); returns the coordinates of the current mouse click point with respect to the coordinates of the viewport

// console.log (e.clientX) // tap coordinates relative to the document

// console.log (e.offsetX); // coordinates relative to the parent element click

// }, false)

console.log (con.clientTop); // clientTop view of the current element is the amount of border pixel values

console.log (con.clientLeft) // The same view of the current element border pixel values

the pageX () attribute is the position of the mouse pointer, relative to the left edge of the document. Similarly pageY also relative to the document

scrollWidth: Get Object rolling width 
scrollHeight: get rolling height of the object. 
scrollLeft: Sets or retrieves the left and the object distance between the window currently visible content of the leftmost 
scrollTop: distance between the object located in the top of the topmost visible in the window contents set or get

// innerHeight Gets or sets of elements within the viewport height Similarly innerWidth

// $ ( '. Footer'). InnerHeight () // value is acquired content + padding value

// $ ( 'footer.') InnerHeight (200);. // the value is set content + padding value

// outerWidth Get or set the width of the outer element viewport Similarly outerHeight

$ ( '.Footer' ) .outerWidth (); // value acquired content + padding + border value

$ ( '.Footer' ) .outerWidth ( 200 is ); // set content + padding + border value of the sum value of $ ( '.footer' ) .outerHeight ( to true ); value acquired content // + padding + value of border + margin

$ ( '.Footer' ) .outerHeight ( 300 , to true ); + border padding + + // set the value of the margin value content total combined

Published 19 original articles · won praise 58 · views 50000 +

Guess you like

Origin blog.csdn.net/cyg_l02/article/details/82974648