clientHeight/scrollHeight/offsetHeight/offsetParent/offsetTop/offsetHeight/scrollTop

来源：互联网发布：mac book能下载爱剪辑编辑：程序博客网时间：2024/05/02 04:37
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>clientHeight/scrollHeight/offsetHeight/offsetParent/offsetTop/offsetHeight/scrollTop</title><style>body,p { margin:0; padding:0;}div { padding:20px;}#div0 { margin:20px 0 0 40px; width:400px;  height:200px; border:10px solid #dadada;}p{ height:20px;}#div1 {background: red; width:300px; margin-left:300px; margin-top:40px;}#div2 {background: green; position: relative;}#div3 {background: orange; position: relative;}</style><script>window.onload = function() {/*clientHeight scrollHeight offsetHeight的对比*//************clientHeight*************/var oDiv = document.getElementById("div0");//计算公式：height + paddingTop + paddingBottom - 底部滚动条所占高度//alert("clientHeight的效果是："+oDiv.clientHeight);   //没有底部滚动条240 有底部滚动条是223，滚动条高度17/************scrollHeight*************///内容如果没有超出边界 那么其值和clientHeight是一样的//如果说内容超过了边界，那么其值计算公式大概是 内容实际高 + paddingTop 浏览器之间会有差异 这个不靠谱//alert("scrollHeight的效果是："+oDiv.scrollHeight); /************offsetHeight*************///计算公式height + paddingTop + paddingBottom + borderTop + borderBottom//alert("offsetHeight的效果是："+oDiv.offsetHeight);  // 260/************总结************//*clientHeight 计算公式：(paddingTop + height + paddingBottom - 底部滚动条所占高度) 浏览器兼容offsetHeight 计算公式：(borderTop  + paddingTop + height + paddingBottom + borderBottom)  浏览器兼容*//*offsetParent  offsetTop offsetHeight*//*元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点,如果没有定位父级，默认是body元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离（偏移值）如果没有定位父级offsetLeft[top] -> html  我们一般会把body的边距清掉，所以到html和到body是一样的*//***********我们计算一个元素实际的偏移值的时候，要用下面这个函数*************/function getPos(obj) {var pos = {left:0, top:0};while (obj) {pos.left += obj.offsetLeft;pos.top += obj.offsetTop;obj = obj.offsetParent;}return pos;}var oDiv2 = document.getElementById("div2");alert('left是：'+getPos(oDiv2).left + 'top是：'+ getPos(oDiv2).top);/*scrollTop*//* 设置滚动条的滚定 */function setScrollTop(scroll_top) {document.documentElement.scrollTop = scroll_top;//window.pageYOffset = scroll_top;document.body.scrollTop = scroll_top;}/* 获取滚动条滚动的距离 */function getScrollTop() {//var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;return scrollTop;}}</script></head><body><div id="div0">    <p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p><p>wewerwerwe33333333333333333333333wqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww33rwe</p></div><div id="div1">    <div id="div2">        <div id="div3"></div>        </div>    </div></body></html>
0 0