jq控制html到顶部的距离,javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分（scroll、scrollTop、scrollLeft、offset、offsetTop、...

获取、设置页面元素到顶部、左部距离、宽高元素卷入(scroll)部分

一、javascript部分

1. 获取元素节点的高度和宽度        1) offsetWidth  // 获取元素节点宽度  包括元素宽度如果有滚动条包含滚动条所占的位置(实际元素宽度)

2) clientWidth  // 获取元素节点的宽度 不包含滚动条所占的位置

3) scrollWidth  // 获取元素节点的宽度 如果子集比他宽且设置为滚动则包含子集滚动卷入部分否则与offsetWidth相同

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

offsetW=offset.offsetWidth; //202

offsetW2=offset.clientWidth; //183

offsetW3=offset.scrollWidth; //200

4) offsetHeight  // 获取元素节点高度度  包括元素宽度如果有滚动条包含滚动条所占的位置(实际元素高度)          5) clientHeight  // 获取元素节点的高度 不包含滚动条所占的位置          6) scrollHeight  //获取元素节点的高度 如果子集比他高且设置为滚动则包含子集滚动卷入部分否则与offsetHeight相同

2.获取元素到顶部和左部的距离

1) offsetLeft //获取元素左边线到浏览器可视部分的左部距离

2) offsetTop //获取元素顶边线到浏览器可视部分的顶部距离

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

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

offDL=offD.offsetLeft; //109

offET=offE.offsetTop; //161

3.获取和设置元素左部和顶部卷入的距离        1) scrollLeft //设置和获取元素左部卷入的距离 ，设置直接赋值即可

2) scrollTop //设置和获取元素顶部卷入的距离，设置直接赋值即可

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

offset.scrollLeft=100; //设置左部卷入部分

offset.scrollTop=40; // 设置顶部卷入部分

console.log(offset.scrollLeft+'\n'+offset.scrollTop); //获取 ： 100 40

二、jQuery部分

1.获取和设置元素宽高               1) $('#id).width(); //获取元素宽度; ()可以传入参数，当传入参数时为设置，参数不用带单位默认为PX

2) $('#id).heigth(); //获取元素高度; ()可以传入参数，当传入参数时为设置，参数不用带单位默认为PX

2.获取元素到顶部和左部的距离

1) $('#id').offset(); //获取元素到顶部和左部的距离，返回的为一个包含【top和left】数组，分别为到顶部和左部的距离

2) $('#id').offset().top //获取元素到顶部的距离

3) $('#id').offset().left //获取元素到左部的距离

3.获取和设置元素左部和顶部卷入的距离               1) $('#id').scrollLeft() //获取元素左侧卷入宽度; ()可以传入参数，传入参数时为设置卷入，参数不用带单位默认为PX               2) $('#id').scrollTop() //获取元素顶部卷入宽度; ()可以传入参数，传入参数时为设置卷入，参数不用带单位默认为PX