关于offsetTop和clientX和pageX的区别

$('.con').offset().top;//jq中offset（）是相对于视口

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

// console.log(con.offsetTop);//原生JS中若父级有定位，则相对与父级，若父级无定位，则相对于视口

// console.log(con.offsetWidth);//原生JS中offsetWidth是该元素的content + padding + border

// console.log(con.style.width);//原生JS只能获取该元素的行间样式的width值，若引入css样式则无法获取width值，而且设置的值也只是设置在行间样式上

// console.log(con.clientWidth);//原生JS中clientWidth = content + padding值之和，同理cilentHeight

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

// // console.log(e.clientX); 返回当前鼠标点击点的坐标，相对于视口的坐标

// console.log(e.clientX)//相对于文档的点击坐标

// console.log(e.offsetX);//相对于父元素的点击坐标

// }, false)

console.log(con.clientTop);//clientTop查看的是当前元素的额border像素值

console.log(con.clientLeft)//同理 查看当前元素的border像素值

pageX() 属性是鼠标指针的位置，相对于文档的左边缘。同理pageY也是相对于文档的位置

scrollWidth:获取对象的滚动宽度 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

//innerHeight获取或者设置元素内视口的高度 同理innerWidth

// $('.footer').innerHeight()//获取的值是content+padding的值

// $('.footer').innerHeight(200);//设置的值是content + padding的值

//outerWidth 设置或者获取元素外视口的宽度 同理outerHeight

$('.footer').outerWidth();//获取的值为content+padding + border的值

$('.footer').outerWidth(200);//设置的值为content+padding+border的总和值$('.footer').outerHeight(true);//获取的值为content+padding+border+margin的值

$('.footer').outerHeight(300,true);//设置的值为content+padding+border+margin的值的总合