HTML+JS代码:
clientWidth 可视区域宽度
offsetWidth 包括边框和补白
scrollWidth 文档宽度,包括滚动条隐藏的区域
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="jquery.min.js"></script>
</head>
<body>
<style>
body {
width: 1200px;
}
#box {
width: 160px;
height: 240px;
padding: 10px;
margin: 10px;
border: 2px solid #ccc;
overflow-y: scroll;
overflow-x: none;
}
</style>
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni deserunt iste placeat suscipit itaque molestiae natus accusantium, optio qui necessitatibus, eaque distinctio odio adipisci autem quaerat blanditiis. Corporis pariatur, recusandae.
</div>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<h1>hello world !</h1>
<script>
/*
* scrollHeight(滚动高度) offsetHeight(完整高度包括边框和补白) clientHeight(可见区内容高度) 可以按英文意思去理解
* document.documentElement.scrollWidth
* document.documentElement.offsetWidth
* document.documentElement.clientWidth
* document.body.scrollHeight
* document.body.offsetHeight
* document.body.clientHeight
* 上面两种写法是一样的,之所以这样写是考虑到兼容性 看页面有没有DTD 文件类型定义(document type definition)
* 如果有则使用document.documentElement.offsetWidth 没有 就使用 document.body.offsetWidth
*
* body 是DOM对象里的body子节点 即<body>标签
* documentElement 是整个节点树的根节点root,即<html>标签
*
* DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。
以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。
而body是子节点,要访问到body标签,在脚本中应该写:document.body。
* */
console.log(document.body.clientHeight); // 获取用户可见区域的高度
console.log(document.body.clientWidth); // 获取用户可见区域的宽度
console.log(document.body.scrollHeight); // 获取整个文档内容的高度
console.log(document.body.scrollWidth); // 获取整个文档内容的宽度 在没有获取body宽度的时候,同 document.body.clientHeight的宽度一样
console.log(document.body.offsetWidth); // 获取body的宽度 包括边框和补白 不包括滚动条宽度
console.log(document.body.offsetHeight); // 获取body的高度 包括边框和补白 不包括滚动条高度
console.log(document.getElementsByTagName('div')[0].offsetLeft); // 获取div距页面左侧的宽度 同jquery的 $('div').offset().left 一样
console.log(document.getElementsByTagName('div')[0].offsetTop); // 获取div距页面左侧的高度 同jquery的 $('div').offset().top 一样
console.log(document.getElementsByTagName('div')[0].clientWidth); // 获取div的可见内容宽度 不包括边框和补白
console.log(document.getElementsByTagName('div')[0].clientHeight); // 获取div的可见内容高度 不包括边框和补白
console.log(document.getElementsByTagName('div')[0].offsetWidth); // 获取整个div的宽度 包括边框和补白
console.log(document.getElementsByTagName('div')[0].offsetHeight); // 获取整个div的高度 包括边框和补白
console.log(document.getElementsByTagName('div')[0].scrollWidth); // 获取整个div内容的宽度 不包括边框和补白
console.log(document.getElementsByTagName('div')[0].scrollHeight); // 获取整个div内容的高度 不包括边框和补白
console.log(document.getElementsByTagName('div')[0].clientLeft); // 获取div边框的宽度
console.log(document.getElementsByTagName('div')[0].clientTop); // 获取div边框的宽度
// 定义包括滚运条内容的整个宽度
var fScrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
// 定义包括滚运条内容的整个宽度
var fScrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
// 滚上去的部分
var iScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// 滚动到左侧的部分
var iScrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
// clientX pageX offsetX
window.onmousemove = function(e) {
e = e || window.event;
// clientX clientY 鼠标相对 于浏览器窗口可视区域的X, Y坐标(窗口坐标),可视区域不包括工具栏和滚动香槟酒。IE事件和标准事件都定义了这2个属性
// console.log(e.clientX+','+ e.clientY);
// 鼠标相对于浏览器窗口可视区域的X,Y坐标,可视区域不包括工具栏和滚动条,IE事件和标准事件都定义了这2个属性
// console.log(e.pageX+','+ e.pageY);
// pageX, pageY类似于e.clientX e.clientY 但它们使用的是文档坐标而非窗口坐标。 这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性
// console.log(e.pageX+','+ e.pageY);
// offsetX offsetY 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性
console.log(e.offsetX+','+ e.offsetY);
}
</script>
</body>
</html>
详细示例图:
欢迎关注技术开发分享录:http://fenxianglu.cn/