<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

    </script>

</head>

<body>

</body>

</html>

以上的代码运行结果如下

因为body默认情况下具有margin，这个默认值为8px。window.innerWidth (1280px) - 2*8px = document.body.clientWidth(1264px)。

如果代码改成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

    </script>

    <style type="text/css">

        *{

            margin: 0;

        }

    </style>

</head>

<body>

</body>

</html>

运行结果如下

document.body.clientWidth和window.innerWidth的结果一样，都是1280px

window.innerWidth和document.body.clientWidth的区别的更多相关文章

  1. window.innerWidth、document.body.clientWidth和html的大小的区别

    首先,我们知道document.body指向的就是body元素,如此,我们就可以以document.body来获取body的大小.何以知之?如下代码: var body = document.quer ...

  2. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

  3. window.onload 和 $(document).ready(function(){})的区别

    这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的 ...

  4. js中的 window.location、document.location、document.URL 对像的区别（转载）

    原文:http://www.cr173.com/html/18417_1.html 当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像: window.location. ...

  5. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  6. $(window).height() 和 $(document).height()的区别

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  7. window.location和document.location的区别分析

    用户不能改变document.location(因为这是当前显示文档的位置).但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而 ...

  8. JQ中$(window).load和$(document).ready区别与执行顺序

    JQ中的$(document).ready()大家应该用的非常多,等同于$(function(){}),基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).l ...

  9. [转]JQ中$(window).load和$(document).ready区别与执行顺序

    一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...

随机推荐

  1. JAVA第八次作业

    JAVA第八次作业 (一)学习总结 1.用思维导图对本周的学习内容进行总结 参考资料: XMind. 2.通过实验内容中的具体实例说明在执行executeUpdate()方法和executeQuery ...

  2. XML一

    HTML(HyperText Markup Language),即超文本标记语言,是用于描述网页文档的一种描述标记语言.                                  而XML(E ...

  3. Spring Boot Shiro 权限管理 【转】

    http://blog.csdn.net/catoop/article/details/50520958 主要用于备忘 本来是打算接着写关于数据库方面,集成MyBatis的,刚好赶上朋友问到Shiro ...

  4. django 多对多 增 删 改 查

      一.通过url方式实现多对多的:增加,删除,编辑 代码目录: urls.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  5. 深入学习Motan系列（三）——服务发布

    袋鼠回头看了看文章,有些啰嗦,争取语音简练,不断提高表达力!袋鼠奋起直追! 注:此篇文章,暂时为了以后时间线排序的需要,暂时发表出来,可是仍然有许多地方需要改写.自己打算把服务端发布,客户端订阅都搞定 ...

  6. oracle-企业信息化

    http://www.itpub.net/thread-1873735-1-1.html        OCP考试心得 http://blog.csdn.net/rlhua/article/detai ...

  7. JAVA面向对象设计中类关系

    现在看以前描述有点小问题:类之间关系分为继承.泛化.依赖.关联.聚合.聚合关系几种.继承是is a关系,泛化(类实现接口)表示like a关系. 类之间的关系种类: Generalization(泛化 ...

  8. SpringBoot事务注解@Transactional

    SpringBoot提供了非常方便的事务操作,通过注解就可以实现事务的回滚,非常方便快捷,下面我们就说一下如何进行事务操作. 1. 事务说明 在Spring中,事务有两种实现方式,分别是编程式事务管理 ...

  9. Django2.0资料

    The Django Book 2.0 中文版:点击下载 Django课件和代码:点击下载

  10. 围绕Buganizer的产品流程

    做技术的一定知道缺陷跟踪系统(bug系统),更不用说做测试的了,不过普遍都认为这系统是用来记录bug的,其实在google内部,这套系统是产品/项目围绕的核心.Google Buganizer扩展了类 ...