js与jq处理盒子模型&&定位

有少量错误，待更正

盒子模型

盒子模型的四个关键内容：margin、border、padding、content

jquery

<div id="box1">1</div> #box1{ width: 300px; height: 320px; margin-left: 30px; border:5px solid #ccc; padding: 20px; } var marginLeft=$("#box1").css('marginLeft'); var borderWith=$("#box1").css('borderColor'); var paddingLeft=$("#box1").css('paddingLeft'); var width=$("#box1").css('width'); var width2=$("#box1").width(); console.log(marginLeft);//输出带px单位的字符串 30px console.log(borderWith);//输出带px单位的字符串 5px console.log(borderColor);//输出rgb()的字符串 rgb(204,204,204) console.log(paddingLeft);//输出带px单位的字符串 20px console.log(width);//输出带px单位的字符串 300px console.log(width2);//输出数值 300 var left=$("#box1").offset().left;//数值，子元素的margin+父元素的margin+padding+border $('#box1').scrollLeft();//数值

即便box1出现横轴滚动条，宽度仍为300px.

js

如果css样式是写在行内的，即元素的style属性中，那么直接通过element.style.marginLeft这样就可以取到。如果样式不在行内（通常情况都不在），通过style是无法取到的。IE和opera支持currentStyle属性，可以取到定义在外部的样式，其他浏览器则需要通过window.getComputedStyle来取.

<div id="box1">a</div> #box1{ width: 300px; height: 320px; margin-left: 30px; border:5px solid #ccc; padding: 20px; } var ele=document.getElementById("box"); var currentStyle=null; if(ele.currentStyle){ currentStyle=ele.currentStyle; }else{ currentStyle=window.getComputedStyle(ele); } console.log(currentStyle.marginLeft);//30px console.log(currentStyle.borderStyle);//solid console.log(currentStyle.borderWidth);//5px console.log(currentStyle.paddingLeft);//20px console.log(currentStyle.width);//300px console.log(ele.offsetWidth);//350，是数值，width+padding+borderwidth console.log(ele.clientWidth);//340，是数值，width+padding console.log(ele.scrollWidth);//340，是数值，等于clientWidth

若overflow为scroll，无论box1内容有多少，都会使box1横轴出现滚动条，width宽度变小为283，即滚动条宽度17px。 若内容少，offsetWidth为350，clientWidth为323，scrollWidth为323。 若内容多，offsetWidth为350，clientWidth为323，scrollWidth大于323。 若overflow为hidden，无论box1内容有多少，width宽度300px。 若内容少，offsetWidth为350，clientWidth为340，scrollWidth为340。 若内容多，offsetWidth为350，clientWidth为340，scrollWidth大于340。

综上

scrollWidth:获取对象的滚动宽度 。相当于clientWidth+超出的滚动的部分长度。 clientWidth:获取对象可见内容的宽度，不包括滚动条，不包括边框。 offsetWidth:width+padding+border

其他

clientLeft: 获取对象的border宽度，返回数值。 clientTop:获取对象的border高度，返回数值。 scrollLeft:设置或获取位于对象左边界（margin边界）和对象中目前可见内容的最左端之间的距离，返回数值。 scrollTop:设置或获取位于对象最顶端（margin边界）和对象中可见内容的最顶端之间的距离，返回数值。 offsetLeft:不能对其进行赋值.当前对象到其上级层左边的距离，返回数值。子元素的边框边界到父元素的margin边界之间的距离。子元素的margin+父元素的margin+padding+border。 offsetTop:当前对象到其上级层顶部边的距离。不能对其进行赋值。子元素的margin+父元素的margin+padding+border。

赋值

js中只有scrollLeft和scrollTop能赋值。

ele.scrollLeft=300;

jquery中所有都可以赋值。

var marginLeft=$("#box1").css('marginLeft','500px'); var borderWith=$("#box1").css('borderWidth','10px'); var paddingLeft=$("#box1").css('paddingLeft','10px'); var width=$("#box1").css('width','390px'); //以上返回的都是jquery对象 $('#box1').offset({left:50,top:50})//赋值 $("#box1").width('500');//赋值 $('#box1').scrollLeft('300');

获取浏览器宽度高度

document.body.clientWidth ==> BODY的width+padding document.body.clientHeight document.body.offsetWidth ==>BODY的width+padding+border 如果设置body固定宽度px，以上两个都会受影响。如果缩放窗口，以上两个不会受影响。

document.documentElement.clientWidth ==> 可见区域宽度（不包括滚动条） document.documentElement.clientHeight document.body.scrollWidth==> 大于等于document.documentElement.clientWidth 如果设置body固定宽度，以上两个不会受影响。如果缩放窗口，以上两个会受影响。

window.screen.width==>屏幕分辨率的宽 window.screen.availWidth==>屏幕可用工作区宽度 如果设置body固定宽度，以上两个不会受影响。如果缩放窗口，以上两个不会受影响。 window.screenTop==>浏览器顶部距离屏幕顶部的宽度 document.body.scrollTop==>body的margin边界距离document顶部边界的距离。 document.documentElement.scrollTop==>body的margin边界距离document顶部边界的距离。

注意

chrome不认识document.documentElement.scrollTop！ document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样： var sTop=document.body.scrollTop+document.documentElement.scrollTop;

补充1

event.clientX 鼠标相对文档的水平座标 event.clientY 鼠标相对文档的垂直座标 event.offsetX 鼠标相对容器的水平坐标 event.offsetY 鼠标相对容器的垂直坐标 event.screenX 鼠标相对屏幕左边的水平坐标 event.screenY 鼠标相对屏幕顶部的垂直坐标

补充2:jquery

width()内容宽度 height() innerWidth()内容宽度+padding innerHeight() outerWidth()内容宽度+padding+border。注意：不加true参数 outerHeight() outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距） outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）

console.log($(window).width());//浏览器窗口的宽度，缩放会影响到,相当于document.documentElement.clientWidth console.log($(document).width());//body的内容宽度+padding+border+1/2*margin,不受缩放影响 console.log($(document.body).width());//body的内容宽度，不受缩放影响