JavaScript及jQuery中的各种宽高属性图解

原文链接 http://blog.poetries.top/2016/12/13/js-props
声明：本文根据慕课网学习视频整理

关注公众号获取更多资讯

强烈建议打开控制台自己动手练习一遍，这样印象才会深刻

第一部分 JavaScript中的宽高属性

一、与window相关的宽高属性

1.1 window.location和document.location

window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL
document的对象的location属性也是引用location对象
所以 window.location === document.location //true

1.2 window.screen

window.screen包含有关用户屏幕的信息。它包括：
- window.screen.width
- window.screen.height
- window.screen.availHeight
- window.screen.availWidth
- window.screenTop
- window.screenLeft

window.screen

1.3 与window相关的宽高

window.innerWidth 内部的宽度
window.innerHeight 内部的高度
window.outWidth 外部的宽度
window.outHeight 外部的高度

与window相关的宽高

二、与document相关的宽高属性

2.1与client相关的宽高

document.body.clientWidth 元素宽度（可视内容区+内边距）
document.body.clientHeight元素高度（可视内容区+内边距）

该属性指的是元素的可视部分宽度和高度，即padding+content
如果没有滚动条，即为元素设定的宽度和高度
如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

example1：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientWidth);  // 350+padding(80) = 430
console.log(document.body.clientHeight);  // 500 + padding(80) = 580

example2: 在div中添加文字，指导出现滚动条

#exp2 {
    width:200px;
    height:200px;
    background:red;
    border:1px solid #000;
    overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //

window7下test.clientWidth

小结clientWidth和clientHeight
- 无padding无滚动： clientWidth = 盒子的width
- 有padding无滚动： clientWidth = 盒子的width + 盒子的padding * 2
- 有padding有滚动： clientWidth = 盒子和width + 盒子的padding * 2- 滚动轴宽度

document.body.clientLeft
document.body.clientTop

这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientLeft);  // 20
console.log(document.body.clientTop);  // 20

小结clientLeft和clientTop

这一对属性是用来读取元素的border的宽度和高度的
- clientTop = border-top
- clientLeft = border-left

2.2 与offset相关的宽高

document.body.offsetWidth（元素的border+padding+content的宽度）
document.body.offsetHeight（元素的border+padding+content的高度）

该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.offsetWidth);  // 470 = padding*2 + 350 + border*2
console.log(document.body.offsetHeight);  // 620 = padding*2 + 500 + border*2

小结offsetWidth和offsetHeight

无padding无滚动无border
- offsetWidth = clientWidth = 盒子的宽度
有padding无滚动有border
- offsetWidth = 盒子的宽度 + 盒子padding2 + 盒子边框2 = clientWidth + 边框宽度*2
有padding有滚动，且滚动是显示的，有border
- offsetWidth = 盒子宽度 + 盒子padding2 + 盒子边框2 = clientWidth + 滚动轴宽度 + 边框宽度*2

**document.offsetLeft **
**document.offsetTop **

了解这两个属性我们必须先了解它，什么是offsetParent

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body.
假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素

offsetLeft的兼容性问题：

在IE6/7中
- offsetLeft = offsetParent的padding-left + 当前元素的margin-left
在IE8/9/10以及chrome中
- offsetLeft = offsetParent的margin-left + offsetParent的border宽度 + offsetParent的padding-left + 当前元素的margin-left
在FireFox中
- offsetLeft = offsetParent的margin-left + 当前元素的margin-left + offsetParent的padding-left

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow:auto;
}
var div = document.getElementById("exp");

在IE8/9/10以及chrome中：
- div.offsetLeft = 本身的margin10 + 父级元素的padding40 + margin10 + border20 = 80
- div.offsetTop = 本身的margin10 + 父级元素的padding40 + margin10 + border20 = 80
在FireFox：（相比chrome中少了border）
- div.offsetLeft = 本身的margin10 + 父级元素的padding40 + margin10 = 60
- div.offsetTop = 本身的margin10 + 父级元素的padding40 + margin10 = 60
在IE6/7中：（相比在FireFox，不但少了border还少了父级元素的margin）
- div.offsetLeft = 本身的margin10 + 父级元素的padding40 = 50
- div.offsetTop = 本身的margin10 + 父级元素的padding40 = 50

2.3与scroll相关的宽高 (实际项目中用的最多)

document.body.scrollWidth
document.body.scrollHeight

document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

document.body.scrollHeight; // 
document.body.scrollWidth; //

当给定宽高小于浏览器窗口的宽高
- scrollWidth = 通常是浏览器窗口的宽度
- scrollHeight = 通常是浏览器窗口的高度
当给定宽高大于浏览器窗口的宽高，且内容小于给定宽高的时候
- scrollWidth = 给定宽度 + 其所有的padding + margin + border
- scrollHeight = 给定高度 + 其所有的padding + margin + border
当给定宽高大于浏览器窗口宽高，且内容大于给定宽高
- scrollWidth = 内容宽度 + 其所有的padding + margin + border
- scrollHeight = 内容高度 + 其所有的padding + margin + border

在某div中的scrollWidth和scrollHeight

无滚动轴时：
- scrollWidth = clientWidth = 盒子宽度 + 盒子padding*2

无滚动轴时

有滚动轴时：
- scrollWidth = 实际内容的宽度 + padding*2
- scrollHeight = 实际内容的高度 + padding*2

有滚动轴时

document.body.scrollLeft
document.body.scrollTop

与前面不同的是，这对属性是可读写的，指的是当元素其中的超出其宽高的时候，元素被卷起来的高度和宽度

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

var mydiv = document.getElementById("exp");

mydiv.scrollTop ;  //默认情况下是0 
mydiv.scrollLeft ; //默认情况下是0 

//可以改写它

mydiv.scrollTop = 20;
console.log(mydiv.scrollTop)

scrollTop和scrollLeft

obj.style.width和obj.style.height

对于一个DOM元素，它的style属性返回的是一个对象，这个对象的任意一个属性是可读写的，style.width等于css属性中的宽度。style.height等于css属性中的高度

2.4 documentElement和body的关系

是父子级的关系

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

console.log(document); //document
console.log(document.documentElement); //html
console.log(document.body); //body

Paste_Image.png

兼容问题推荐使用获取浏览器窗口可视区域大小

document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

三、Event对象的5种坐标

Event对象的5种坐标

例：

<div id="example" 
style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>

var example = document.getElementById("example");
example.onclick = function(e){
    console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);
    console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);
    console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);
    console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);
    console.log("x "+e.x + " : " + " y "+e.y);
}

Event对象的5种坐标

注意之处：pageX、pageY、clientX、clientY区别

兼容性问题
- pageX、pageY (chrome FF,IE 678无效)--拿到滚动条的高度+第一屏的距离
- clientX、clientY (IE及其他浏览器)--只会拿到第一屏幕的距离，不会拿到滚动条的高度
在没有滚动条的情况，第一屏下
- clientX、pageX获取的鼠标位置是一致的
- clientY 、pageY 获取的鼠标位置是一致的

无滚动条情况下

在有滚动条的情况
- clientX、pageX获取的鼠标位置有区别
- clientY 、pageY 获取的鼠标位置有区别

有滚动条情况下

浏览器的滚动距离 scrollTop 、scrollLeft
- document.body.scrollTop //chrome
- document.documentElement.scrollTop //其他浏览器
- 兼容写法：
  - document.body.scrollTop || document.documentElement.scrollTop

封装一个函数获取鼠标距离顶部左侧的实际距离兼容IE、FF、chrome

function getXY(ev){
    var ev = ev || window.event;
    var xx  = 0;
    var yy = 0;
    if(ev.pageX){ //iE9+
        xx = ev.pageX;
        yy = ev.pageY;
    }else{ 
        //IE678 clientX,clientY + scroll
        var scrollTop = document.documentElement.scrollTop || 
                   document.body.scrollTop;//IE9+
        var scrollLeft = document.documentElement.scrollLeft || 
                    document.body.scrollLeft;//IE9+     
        xx = ev.clientX + scrollLeft;
        yy = ev.clientY + scrollTop;
    }
    return {
        x:xx,
        y:yy
    };

四、 js各种宽高的应用

example1：可视区域加载

用来解决offset的兼容性难问题

<div id="example1" ></div>

#example1 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;
                
            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

function showDiv(){
            var example = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
            var divTop = example.getBoundingClientRect().top;
            if(divTop <= clients){
                example.classList.add("fadeInLeft");
                              //  这里可以通过setAttribute设置图片的src按需加载
            }
            document.title = clients+"---"+divTop;
        }
        
window.onscroll = showDiv;

在线演示

example2：网页滚动到顶部或者底部

<div id="example2" ></div>

#example2 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

function scrollTopOrBottom(){
            var example2 = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度，兼容性写法
            var scrollTop = document.body.scrollTop;
            var wholeHeight = document.body.scrollHeight;
            if(clients + scrollTop >= wholeHeight){
                alert("我已经到了底部!");
                              // 这里可以调用Ajax分页加载到页面中，实现多页加载功能
            }else if(scrollTop == 0){
                alert("我已经到了顶部了!");
                      
            }
            document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop;
        }
        
window.onscroll = scrollTopOrBottom;

在线演示

example3：DIV滚动到底部加载

<div id="example3" >
            DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
            DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
            DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
            DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
            DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
            DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
</div>

#example3 {
            width: 500px;
            height: 400px;
            background: red;
            margin: 10px auto;
            padding: 10px;
            overflow-y: scroll;
}

var div = document.getElementById("example3");
        function divScroll(){
            
            var wholeHeight = div.scrollHeight;//滚动区域高度
            var divScrollTop = div.scrollTop;//卷上去的那部分高度
            var divHeight = div.clientHeight; //div的可视区域的高度
            
            
            if(divScrollTop + divHeight >= wholeHeight){
                alert("我已经到了底部!");
               // 这里可以在div中通过滚动加载分页按需显示
            }else if(divScrollTop == 0){
                alert("我已经到了顶部了!");
            }
            document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop;
}
        
div.onscroll = divScroll;

在线演示

example4：计算滚动轴的宽度

    //获取滚动轴的宽度
        function getScrollBar(){
            var el = document.createElement("p");
            var styles = {
                width:"100px",
                height:"100px",
                overflowY:"scroll"
            };
            for (var prop in styles){
                el.style[prop] = styles[prop];//把 styles上的属性全部遍历拷贝到el.style上
                
            }
            document.body.appendChild(el);
            var scrollBarWidth = el.offsetWidth - el.clientWidth;
            el.remove();
            return scrollBarWidth;
        }
        alert(getScrollBar());//17

在线演示

五、js中的宽高属性总结

[图片上传失败...(image-91bca3-1545535231184)]

Paste_Image.png

document相关的宽高

第二部分 jQuery中的宽高属性

一、jquery相关宽高介绍

1.1 width()
- 特殊元素window.document只可以读，普通元素可以读写，width()返回结果无单位，css("width")的结果有单位

width--height

width

1.2 innerWidth()
- 包含padding（不推荐window,document调用）
1.3 innerHeight()

innerWidth--innerHeight

innerWidth

1.4 outerWidth()
- 包含padding和border，当传true时包含marging，不传时不包含marging（不推荐window,document调用）
1.5 outerHeight()

outerWidth--outerHeight

outerWidth

1.6 scrollLeft():
- 相对于水平滚动条左边的距离，如果滚动条非常左、或者元素不能被滚动，这个值为0；
1.7 scrollTop():
- 相对于垂直滚动条上边的距离，如果滚动条非常上、或者元素不能被滚动，这个值为0；
1.8 .offset():
- 相对于document的当前坐标值(相对于body左上角的left,top的值)；
1.9 .position():
- 相对于offset parent的当前坐标值(相对于offset parent元素的左上角的left、top的值)

offset和position区别

二、jquery相关宽高举例

2.1 exmaple1

example1

    <div class="parentDiv">
        <div class="childrenDiv"></div>
    </div>

html,body {
    margin:10px;
    border:5px solid red;
    padding:20px;
}
.parentDiv {
    width:800px;
    height:500px;
    margin:5px auto;
    background:#FF6600;
    border:5px dashed green;padding:30px;position:relative;

}
.childrenDiv {
    width:300px;
    height:500px;
    margin:5px auto;
    background:yellow;
    border:5px solid black;
    padding:5px;
    box-sizing:border-box;/*包括padding和border的值*/
}

//特殊元素的高度
//window  document
console.log("$(window).height()"+$(window).height());
console.log("$(document).height()"+$(document).height());

//innerHeight 
console.log("$(window).innerHeight()"+$(window).innerHeight());
console.log("$(document).innerHeight()"+$(document).innerHeight());

//普通child元素的高度

//480 = 500 - border*2 - padding*2 (因为设置了box-sizing，box-sizing把border和padding的值计算了进去)
console.log('$(".childrenDiv").height()'+ $(".childrenDiv").height());

//490 = 500 - border*2 - padding*2（innerHeight不包括padding）
console.log('$(".childrenDiv").innerHeight()'+ $(".childrenDiv").innerHeight());

//500 = 500  不包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight());

//510 = 500 + margin true包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight(true));

//scrollTop

$(window).scroll(function(){
    document.title = "scrollTop  "+$(this).scrollTop();
});

// jquery宽高演示之offset和position

console.log('$(".childrenDiv").offset().top '+$(".childrenDiv").offset().top);
console.log('$(".childrenDiv").offset().left '+$(".childrenDiv").offset().left);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().top);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().left);

Paste_Image.png

offset-position

在线演示

三、jquery各种宽高应用

3.1 jquery可视区域加载

<div id="example" ></div>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;
                
            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

        $(window).scroll(function(){
            var ks_area = $(window).height();//可视区域高度
            var scrollHeight = $(window).scrollTop();//被卷上去的那部分
            var divTop = $("#example").offset().top;//盒子距离浏览器顶部的距离
            
            if(ks_area + scrollHeight >= divTop){
                $("#example").addClass("fadeInLeft");
            }
            document.title = ks_area+'-'+scrollHeight+'-'+divTop;
        });

在线演示

3.2 jquery滚动到底部和顶部加载

<div id="example" ></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

$(window).scroll(function(){
    var ks_area = $(window).height();
    var scrollTop = $(window).scrollTop();
    var wholeHeight = $(document).height();
    
    if(ks_area + scrollTop >=wholeHeight ){
        alert("已经到底部了");
    }else if(scrollTop == 0){
        alert("已经到头部了");
    }
})

在线演示

（完）

最后编辑于：2018.12.23 11:20:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 156,907评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,546评论 1赞 289
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,705评论 0赞 238
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,624评论 0赞 203
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,940评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,371评论 1赞 210
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,672评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,396评论 0赞 195
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,069评论 1赞 238
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,350评论 2赞 242
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,876评论 1赞 256
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,243评论 2赞 251
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,847评论 3赞 231
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,004评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,755评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,378评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,266评论 2赞 259

JavaScript及jQuery中的各种宽高属性图解

第一部分 JavaScript中的宽高属性

一、与window相关的宽高属性

1.1 window.location和document.location

1.2 window.screen

二、与document相关的宽高属性

2.1与client相关的宽高

2.2 与offset相关的宽高

2.3与scroll相关的宽高 (实际项目中用的最多)

2.4 documentElement和body的关系

三、Event对象的5种坐标

四、 js各种宽高的应用

五、js中的宽高属性总结

第二部分 jQuery中的宽高属性

一、jquery相关宽高介绍

二、jquery相关宽高举例

三、jquery各种宽高应用

推荐阅读更多精彩内容