<!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. Ubuntu 15.10安装KVM

    1.查看cpu是否支持硬件虚拟化 egrep "svm|vmx" /proc/cpuinfo 2.安装KVM apt-get install qemu-kvm virt-manag ...

  2. 在Nginx服务器中设置多个站点

    这里以配置1个站点(1个域名)为例,n 个站点可以相应增加调整, 假设:IP地址: 127.0.0.1域名1 phpmyadmin.zhengwen.cn 放在 /www/phpmyadmin.zhe ...

  3. Robot Framework--07 变量的声明、赋值及其使用

    转自:http://blog.csdn.net/tulituqi/article/details/7984642 一.变量的声明 1.变量标识符 每个变量都可以用  变量标识符{变量名}    来进行 ...

  4. php Hash Table(四) Hash Table添加和更新元素

    HashTable添加和更新的函数: 有4个主要的函数用于插入和更新HashTable的数据: int zend_hash_add(HashTable *ht, char *arKey, uint n ...

  5. Autofac.Integration.Owin

    public static IAppBuilder UseAutofacMiddleware(this IAppBuilder app, ILifetimeScope container) { if ...

  6. 使用EntityFramework6.1的DbCommandInterceptor拦截生成的SQL语句

    开始 EF6.1也出来不少日子了,6.1相比6.0有个很大的特点就是新增了System.Data.Entity.Infrastructure.Interception 命名空间,此命名空间下的对象可以 ...

  7. 【10-25】OOP基础-飞机游戏知识点

    知识点 鼠标适配器类为抽象类,使用匿名子类实现鼠标事件的重写,创建一个鼠标适配器对象 添加鼠标事件监听器到JPanel对象实现鼠标的响应 创建定时器Timer对象,在定时器的任务列表方法schedul ...

  8. log4net--不可多得的开源日志记录组件

    log4net--不可多得的开源日志记录组件 1 前奏 一直在用log4net日志工具,却没时间写个日志给大家分享一下这个工具,趁最近比较空些,好好分享一下这个工具. 2 说明 Log4net介绍就不 ...

  9. 记录在xx公司被考核的15天及自己的感想

    在大学有两件事让我很遗憾. 第一:在2013年7月我和自己的前任女朋友分手,这是两年前的事了,我们谈了七个月. 第二:在2015年4月我被xx公司淘汰了,正如我的前任女朋友是我遇到的最好女孩,这家公司 ...

  10. [设计模式] javascript 之 迭代子模式

    迭代子模式:定义 迭代子模式,又称游标模式,是一种用于对聚集进行顺序访问规则的模式,是一种行为模式:它用于提供对聚集对象的一种统一的访问接口,使客户能够在不了解聚集对象内部结构的情况对聚集对象进行访问 ...