<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>获取各类宽高</title>

    <script src='../jquery-3.1.1.min.js'></script>

    <script>

        $(function(){

           //浏览器当前窗口可视区域高度

            console.log($(window).height());

            console.log($(window).width());

            //浏览器当前窗口文档的高度

            console.log($(document.body).height());

            console.log($(document.body).width());

            //浏览器的总高度包括padding border

             console.log($(document.body).outerHeight(true));

             console.log($(document.body).outerWidth(true));

        });

    </script>

</head>

<body>

</body>

</html>

1、获取实际内容区域的宽和高：width()和height();
2、获取实际内容区域+padding的宽和高：innerWidth()和innerHeight();
3、获取实际内容区域+padding+border的宽和高：outerWidth()和outerHeight();
4、获取实际内容区域+padding+border+margin的宽和高：outerWidth(true)和outerHeight(true)

jquery 打印宽高的更多相关文章

  1. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  2. js 和 jquery的宽高

    window 和 document : window 对象表示浏览器打开的窗口,可以省略 document对象(浏览器的html文档)是window对象的一部分 document.body等于wind ...

  3. A4纸网页打印——宽高设置

    一.在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi . A4纸张的尺寸是2 ...

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

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  5. 浅谈jQuery宽高及其应用

    [前言] 今天讲了讲jQuery各种元素宽高的获取和设置,下面简单总结下,希望对各位小伙伴有所帮助 [主体] 补充知识点: (1)width()返回结果无单位,css("width" ...

  6. js/jQuery中的宽高

    一.和window有关的宽高 window.innerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度) window.outerWidth ...

  7. JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

    1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...

  8. 常见浏览器的宽高代码写法！有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

    我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页 ...

  9. JQUERY获取loaded 宽高这么变态

    JQUERY获取loaded 宽高这么变态: $('<img/>').attr('src',img.src).load(function() { img.Owidth = $(this). ...

随机推荐

  1. dedecms标签的sql语句

    {dede:sql sql='Select content from dede_arctype where id=1' titlelen='40′} [field:content/] {/dede:s ...

  2. live555编译、移植

    1.windows下编译 转 http://www.cnblogs.com/skyseraph/archive/2012/04/11/2442840.html 2.linux下编译,以及交叉编译,海思 ...

  3. Python之路【第五篇续】：面向对象编程二

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABgQAAALaCAIAAABxja8cAAAgAElEQVR4nOzd6X9Tdd74/+uv+f5uzF

  4. mysql数据表分表策略2（转）

    mysql分表方法: 方法一. 做数据库集群! 主从数据库 双向热备份(或一对多的数据库实时备份策略),这样可将数据库查询分摊到几个服务器去(可跟服务器负载均衡结合起来架构) 优点:扩展性好,没有多个 ...

  5. verilog阻塞与非阻塞的初步理解(三)

    下面这段源码是因为习惯不好,出现不正确波形的例子. module pwm_division(reset,clkin,clkout); input reset,clkin; output clkout; ...

  6. Redis for .NET 系列之实现分页需求

    代码笔记: var tableName = "Table1"; redisClient.AddItemToSortedSet(tableName, ); redisClient.A ...

  7. Class.isAssignableFrom(Class clz)与instanceof与Class.isInstance(Object obj) 的区别和联系

    编程的时候可能会遇到一个不知道它属于哪个类的对象,我们可以用下列运算符或者方法来判断.  1.instanceof instanceof是运算符只被用于对象引用变量,检查左边的被测试对象是不是右边类或 ...

  8. 【8-21】java学习笔记03

    内部类(静态内部类&非静态内部类) 静态外部类成员方法(如main方法)不能直接访问内部类,但是可以通过外部类的方法,在其中创建内部类实例对象,间接使用: 非静态内部类可以直接访问外部类的私有 ...

  9. django 文件上传

    模板文件: <form method='post' action='/script/upload/' enctype="multipart/form-data" accept ...

  10. 【CISP笔记】安全漏洞与恶意代码（2）

    恶意代码自我保护 进程保护 进程守护 超级权限 检测对抗 反动态调试 反静态调试 恶意代码检测技术 特征码扫描 沙箱技术 行为检测 恶意代码分析技术 静态分析 需要实际执行恶意代码,它通过对其二进制文 ...