window | document | doby 在浏览器中的区别

最新推荐文章于 2023-06-15 21:37:23 发布

无盐海

最新推荐文章于 2023-06-15 21:37:23 发布

阅读量1.3k

点赞数

分类专栏： DOM JQuery 文章标签： window document doby 浏览器中

本文链接：https://blog.csdn.net/Fanbin168/article/details/45024351

版权

JQuery 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

DOM

19 篇文章 0 订阅

订阅专栏

《测试1 body里没有任何内容》

测试前提：body里面没有任何内容

我们通过测试得知 window 和document的宽度都是一样的。都为1920 而body的宽度是document的宽度减去body外边距的宽度。所以1920-8*2=1904 所以body的宽度为1904

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>

</body>
</html>
<script type="text/javascript">
    alert("window的宽度为：" + $(window).width());     //打印出：window的宽度为：1920 【注：我的屏幕分辨率是：1920*1080】
    alert("document的宽度为：" + $(document).width()); //打印出：document的宽度为：1920  
    alert("boyd的宽度为：" + $("body").width());       //打印出：boyd的宽度为：1904   【查看CSS 发现 body的margin:8px】


    alert("window的高度为：" + $(window).height());     //打印出：window的高度为：954
    alert("document的高度为：" + $(document).height()); //打印出：document的高度为：954
    alert("boyd的高度为：" + $("body").height());       //打印出：boyd的高度为：0
</script>

《测试2, 在body里放100个DIV 》

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <style type="text/css">
        div {
            width:100px;
            height:18px;
        }
        body {
        margin:8px;
        padding:0px;

        }
    </style>
</head>
<body>
    <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></div>
</body>
</html>
<script type="text/javascript">
    
    //1903+17=1920
    alert("window的宽度为：" + $(window).width());     //打印出：window的宽度为：1903 【注：我的屏幕分辨率是：1920*1080；此时浏览器滚动条的宽度为17px】
    
    //1903+17=1920
    alert("document的宽度为：" + $(document).width()); //打印出：document的宽度为：1903  

    //1887+8*2+17=1920
    alert("boyd的宽度为：" + $("body").width());       //打印出：boyd的宽度为：1887   【查看CSS 发现 body的margin:8px, padding为0px；此时浏览器滚动条的宽度为17px】

    
    alert("div的宽度为：" + $("div").width());         //打印出：div的宽度为：100 【style里面将div的宽度设定为100px,高度设为18px】

    //测试1里已经展示这个954是怎么来的了。
    alert("window的高度为：" + $(window).height());     //打印出：window的高度为：954
    
    //18*100+8*2=1816
    alert("document的高度为：" + $(document).height()); //打印出：document的高度为：1816 【div在高度为18px ，页面上有100个div；body的margin:8px】

    //18*100=1800;
    alert("boyd的高度为：" + $("body").height());       //打印出：boyd的高度为：1800 【div在高度为18px ，页面上有100个div】


    alert("div的高度为：" + $("div").height());         //打印出：div的高度为：18


    //通过上面的值得出：window与document值的区别是window表示当前视窗。而document表示当前文档；
</script>

无盐海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window | document | doby 在浏览器中的区别

《测试1》测试前提：body里面没有任何内容我们通过测试得知 window 和document的宽度都是一样的。都为1920 而body的宽度是document的宽度减去body外边距的宽度。所以1920-8*2=1904 所以body的宽度为1904 alert("window的宽度为：" + $(window).width());
复制链接

扫一扫