死磕offsetLeft,clientLeft，offsetWidth,clientWidth,scrollHeight... - lizimeme

死磕offsetLeft,clientLeft，offsetWidth,clientWidth,scrollHeight...

在学习的时候一直不理解offsetWidth，offsetLeft,scrollHeight这些属性的区别，今天从网上看到博友的文章，自己总结了一下，与君共享，有疏漏之处，还望指教！！

效果图如下:

css样式如下：

<style>

*,div{margin: 0px;padding: 0px;}

.container { width: 1000px;height: 500px;margin: 100px auto;background: pink;position: relative}

.container div{position: absolute;left: 100px;}

</style>

------------------------------------------

html如下：

<body>
<div class="container" id="container">
<div style="width:200px;height:200px;background:green;overflow:scroll;border:10px solid black;box-sizing:content-box;top:100px;" id="content">
马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅）
马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅）
马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅）
马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅）
马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅）
 
</div>
</div>
</body>

-------------------------------------

js代码如下：

 1 <script>
 2       window.onload = function(){
 3           var container = document.getElementById('container');
 4           var content = document.getElementById('content');
 5 
 6          console.log("content.style.top="+ content.style.top);
 7          console.log("content.offsetHeight = "+content.offsetHeight);
 8          console.log("content.offsetWidth="+content.offsetWidth);
 9          console.log("content.offsetTop="+content.offsetTop);
10          console.log("content.offsetLeft="+content.offsetLeft);
11          console.log("content.clientHeight="+content.clientHeight);
12          console.log("content.clientWidth="+content.clientWidth);
13          console.log("content.clientTop="+content.clientTop);
14          console.log("content.clientLeft="+content.clientLeft);
15          console.log("content.scrollHeight="+content.scrollHeight);
16          console.log("content.scrollWidth="+content.scrollWidth);
17 
20 
21       }
22 
23 
24 </script>

控制台输出：

假设 y 为某个 HTML 控件，

关于y.offsetHeight & y.offsetWidth

y.offsetWidth指的是 y控件的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型。

y.offsetHeight指y控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型。

y.offsetTop 指 y相对于父元素顶部的距离，整型。

y.offsetLeft指 y相对于父元素左边的距离，整型。

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

二、offsetTop 只读，而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

关于y.clientHeight & y.clientWidth

y.clientHeight 都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。

在上面的这个例子中，绿色的区域为可见区，给子元素设置了宽高各为200px，border设置为10px,并设置属性box-sizing :content-box;

在控制台输出 content.clientHeight 和content.clientWidth各为183 , 滚动条的宽为17，

content.offsetWidth =220

由此可见：

y.offsetWidth = y.clientWidth + 边框 +滚动条；

关于y.scrollHeight & y.scrollWidth

y.scrollHeight 是网页内容实际高度,也就是实例中 div中文字内容的高度。

y.scrollWidth 是网页内容的实际宽度。

简单地说：

clientHeight 就是透过浏览器看内容的这个区域高度（示例中的绿色区域）;

offsetHeight 就是可视区域 clientHeight 滚动条加边框；

scrollHeight 指的是容器内内容的实际高度，（示例中如果将子元素的overflow属性去除，就能看到其中内容，内容的高度即是scrollHeight）。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

接下来将script的内容替换如下：

<script>
   window.onload  = function(){

        console.log("content.style.left= "+content.style.left);
         console.log("content.offsetTop = " + content.offsetTop);
         console.log("content.offsetLeft = " + content.offsetLeft);
         console.log("content.clientTop = " + content.clientTop);
         console.log("content.clientLeft = " + content.clientLeft);
         console.log("content.scrollTop = " + content.scrollTop);
         console.log("content.scrollLeft = " + content.scrollLeft);
}
</script>

控制台输出：

关于y.offsetTop & y.offsetLeft

均指Html元素相对于自己的父元素元素的位置，获取的时候并没有返回单位;

关于y.clientTop & y.clientLeft

元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0

关于y.scrollTop & y.scrollLeft

如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.

对于不可以滚动的元素,这些值总是0

#温馨提示# offset*,client*,scroll* 应用在css中不起作用，请在js中进行运用。

-------------关于gscrollTop应用，下篇博文我将放左右箭头无间切换图片的效果----------------------

跑马灯无间滚动示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul,li{padding: 0px;margin: 0px}
        #marScroll{height: 60px;overflow: hidden}
        #marScroll li{height: 20px;line-height: 20px;font-size: 14px;}
    </style>
</head>
<body>
    <div id="marScroll">
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
        </ul>
    </div>

    <script>
      (function(){
          var target = document.getElementById('marScroll');
          var oUl = target.getElementsByTagName('ul')[0];
          var oUl_h = oUl.offsetHeight;
          //当内容少的时候就不用滚动那啦
          if(target.offsetHeight > oUl.offsetHeight)return;
           target.innerHTML+=target.innerHTML;
          // 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了
          var fn = function(){
               if(target.scrollTop == oUl_h){
                   target.scrollTop = 0;
               }else{
                   target.scrollTop++;
               }
          }
          var timer = setInterval(function(){
              fn();
          },30);
          //鼠标经过此内容块，就停止滚动
          //hover
          target.onmouseover = function(){
               clearTimeout(timer);
          }
          target.onmouseout = function(){

              timer = setInterval(function(){
                  fn();
              },30);
          }
            

      })();
    </script>
</body>

参考：www.cnblogs.com/JackJiang/archive/2008/12/24/1361048.html

posted on 2017-02-20 17:04 lizimeme 阅读(371) 评论(0) 收藏举报

刷新页面返回顶部