1.可视区高宽度:浏览器展示内容的大小,会随浏览器边框调整而改变。
①获取:$(window).height(); $(window).width();
2.页面的文档高度:浏览器页面展示内容的高度,与浏览器外边框无关,只与内容有关,包括内容的宽度,margin,border等。
①获取:$(document).height(); $(document).width();
3.滚动条滚动距离(包括距离顶部和左边的垂直宽度)
①获取:$(document).scrollTop(); $(document).scrollLeft();
4.计算元素位置和偏移量,包括通过css获取(含单位px)和offset(纯number数值)获取
①$("#id").offset();
会获得一个对象,包括top和left两个键值对。
②$("#id").offset().top;
获得其中top的值
③$("#id").offset().left;
获得其中left的值
④$("#idd").css("width");
获得其中宽度,是带单位px的。
测试例子:
// 获取浏览器显示区域的高度 :
console.log("1.可视区窗口高度(调整窗口外框会改变,里面的内容无关):"+$(window).height());
// 获取浏览器显示区域的宽度 :
console.log("2.可视区窗口宽度(调整窗口外框同样会改变):"+$(window).width());
// 获取页面的文档高度 :
console.log("3.文档高度document (页面中填充物撑开的高度会包括物体高度,margin、border\padding) "+$(document).height());
// 获取页面的文档宽度 :
console.log("4.文档宽度document "+$(document).width());
// 获取滚动条到顶部的垂直高度 :
console.log("5.滚动条顶部的距离"+$(document).scrollTop());
// 获取滚动条到左边的垂直宽度 :
console.log("6. 滚动条左边的距离"+$(document).scrollLeft());
// 计算元素位置和偏移量:
console.log("7. 元素距离页面边框上下左右的距离:");
console.log($("#idd").offset());
console.log($("#idd").offset().top);
console.log($("#idd").css("width"));
// offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
测试结果:----------------------------
—clientX:返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
clientY:与上类似,是垂直方向鼠标对于浏览器页面的距离。
----document.documentElement.clientWidth:获取浏览器窗口文档显示区域的宽度,不包括滚动条。
document.documentElement.clientHeight: 与上类似
—document.documentElement.offsetWidth:获取DOM文档的根节点html元素对象的宽度,即offsetWidth=width+padding+border,不包括margin。
document.documentElement.offsetHeight:高度。