js、jQuery获取各种宽高

js获取各种宽高

第一部分：DOM对象

1.1只读属性
  DOM节点的固有属性，只能通过js去获取不能设置，而且获取的值是只有数字不带单位的
1)clientWidth、clientHeight
  元素的可视部分宽度和高度(padding+content)，如果没有滚动条，即为元素设定的高度和宽度，如果有滚动条，滚动条会遮盖元素的宽高，那么该属性就是元素本来宽高减去滚动条的宽高。
备注：移动端滚动条宽高不计

2）clientTop、clientLeft
  元素border的宽度和高度的
3）offsetWidth、offsetHeight
  元素border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和元素设定的border以及width和height有关

4）offsetLeft、offsetTop
  offsetParent：当前元素离自己最近的具有定位的（position:absolute或者relative）父级元素，如果从该元素向上找不到这样一个父级元素，那么该元素的offsetParent就是body元素

5) scrollHeight和scrollWidth
  当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度
1.2可读可写属性
   不仅能通过js获取该属性的值，还能够通过js为该属性赋值
scrollTop和scrollLeft
   当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度
该属性还可以通过赋值内容自动滚动到某个位置

第二部分：Event对象

1）clientX和clientY
  当事件发生时，鼠标点击位置相对于浏览器(可视区)的坐标，即浏览器左上角坐标的(0,0),不管浏览器窗口大小如何变化，都不会影响点击位置的坐标

2）screenX和screenY
   事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值

3)offsetX和offsetY
   当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标

4）pageX和pageY
   事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> 
    <title>js各种宽高</title>
    <style>
        *{margin: 0;padding: 0;}
        .content{position: relative;width: 200px;height: 200px;}
        .one{
            width: 200px;height: 200px;border: 5px solid green;
            overflow:scroll;
        }
        .two{
            width: 100px;height: 100px;background: red;border: 1px solid #000;
            position: absolute; top:40px; left:20px;
        }
        .note{width:250px; height:250px; border:2px solid blue;
            position: absolute; margin: -200px 0 0 130px;}
        .show{width:100% height:100%; border:2px solid blue;margin: 60px 0 0 10px;padding: 10px;position: absolute;}
    </style>

</head>
<body>
    <div class="content">
      <div class="one">
          contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>contentcontent</br>
      </div>
      <div class="two"></div>
    </div>
    <div class="note">
      <p>.one{
            position: relative;</br>  width: 200px;</br>
              height: 200px;</br>  border: 5px solid green;</br>}
      </p>
      <p>.two{
            width: 100px;</br>  height: 100px;</br>
              background: red;</br>  border: 1px solid #000;</br>
              position: absolute;</br>  top:40px;</br>
              left:20px;</br>
        }
      </p>
    </div>
    <div class="show">
      <h3>div class="one" 各种宽高</h3>
    </div>
  <script src="http://s.thsi.cn/js/m/js/zepto.min.js"></script>
  <script>
    $(function(){

        var oDiv=document.querySelector('.one');
        var html = '';
        html += "<p>clientWidth:"+oDiv.clientWidth + "; clientHeight:"+oDiv.clientHeight+"</p>";
        html += "<p>clientLeft:"+oDiv.clientLeft + "; clientTop:"+oDiv.clientTop+"</p>";
        html += "<p>offsetWidth:"+oDiv.offsetWidth + "; offsetHeight:"+oDiv.offsetHeight+"</p>";
        html += "<p>offsetTop:"+oDiv.offsetTop + "; offsetLeft:"+oDiv.offsetLeft+"</p>";
        $('.show').append(html);

        oDiv.onscroll=function(){
            console.log(this.scrollHeight+":"+this.scrollWidth);
            console.log(this.scrollTop+":"+this.scrollLeft);
        }

        oDiv.onclick=function(event){

            console.log(event.clientX+":"+event.clientY);  
            console.log(event.screenX+":"+event.screenY); 
            console.log(event.offsetX+":"+event.offsetY);  
            console.log(event.pageX+":"+event.pageY); 
        }

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

jQuery获取各种宽高

$(document).height();//获取整个网页的高度
$(window).height();//获取浏览器可视窗口的高度
$(window).scrollTop();//获取可视窗口顶部距离网页顶部的距离
当网页拉至底部时：
  $(document).height() == $(window).height() + $(window).scrollTop()
获取标签的高度：
$('标签').height();//标签: content
$('标签').innerHeight();//标签: padding+content
$('标签').outerHeight();//标签: border+padding+content
$('标签').outerHeight(true);//标签: margin+border+padding+content

备注：
1、zepto.js没有innerHeight()、outerHeight()方法
2、zepto.js: 
   $('标签').height();//标签: border+padding+content