获取各种尺寸

console.log("浏览器时下窗口可视区域高度 :"+$(window).height())
console.log("浏览器时下窗口文档的高度 :"+$(document).height())
console.log("浏览器时下窗口文档body的高度 :"+$(document.body).height())
console.log("浏览器时下窗口文档body的总高度 包括border padding margin :"+$(document.body).outerHeight(true))
console.log("浏览器时下窗口可视区域宽度 :"+$(window).width())
console.log("浏览器时下窗口文档对于象宽度 :"+$(document).width())
console.log("浏览器时下窗口文档body的高度 :"+$(document.body).width())
console.log("浏览器时下窗口文档body的总宽度 包括border padding margin :"+$(document.body).outerWidth(true))
console.log("获取滚动条到顶部的垂直高度 :"+$(document).scrollTop())
console.log("获取滚动条到左边的垂直宽度 :"+$(document).scrollLeft())

获取鼠标在当前元素的位置
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
<script>
　　function get_canvas(ev, obj) {
　　m_clientX = ev.clientX - obj.offsetLeft;
　　m_clientY = ev.clientY - obj.offsetTop;
　　document.getElementById("tips").innerHTML = "当前坐标：X：" + m_clientX + " ,Y：" + m_clientY;
}
</script>

 

jQuery操作元素的尺寸
获取方式：
① width 和 height方法操作元素的大小，不包含内边距、边框 和 外边距。
获取：​ 元素.width();​ 元素.height();​
设置：​ 元素.width(value);​ 元素.height(value);
② innerWidth和innerHeight
操作元素的大小，包含内边距 ，不包含边框 和 外边距。
获取：​ 元素.innerWidth();​ 元素.innerHeight();​
设置：​ 元素.innerWidth(value);​ 元素.innerHeight(value);
③ outerWidth 和 outerHeight
操作元素的大小，包含内边距和边框 ，不包含外边距。
获取：元素.outerWidth ();​ 元素.outerHeight();​
设置：元素.outerWidth (value);​ 元素.outerHeight(value);

jQuery操作元素的位置
获取元素距离文档的位置
元素.offset() 返回一个对象,对象中包含left和top 分别表示距离文档左侧和文档顶部的位置
获取元素距离就近上级定位元素的位置
元素.position() 返回一个对象,对象中包含left和top分别表示距离就近上级定位的左侧和顶部的位置
操作页面卷去的距离
获取
元素.scrollTop()常用
元素.scrollLeft();
设置
元素.scrollTop(value); 常用​
元素.scrollLeft(value);