<!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. fileinput模块

    刚才练习的时候,报如下错误: AttributeError: module 'fileinput' has no attribute 'input',后来Google参考这篇文章https://mai ...

  2. 表达式拼接Expression<Func<IEntityMapper, bool>> predicate

    /// <summary> /// 重写以筛选出当前上下文的实体映射信息 /// </summary> protected override IEnumerable<IE ...

  3. tamper绕WAF小结

    sqlmap有一些非常好的脚本,在如下的地址中你能够发现它们.使用svn检查 https://svn.sqlmap.org/sqlmap/trunk/sqlmap sqlmap-dev 事实上,脚本的 ...

  4. 网络方案 & HTTP状态码

    在iOS中,常见的发送HTTP请求的方案包括: 苹果官方 名称 说明 NSURLConnection iOS 2.0 推出,用法简单,最古老最经典最直接的一种方案 NSURLSession iOS 7 ...

  5. 在虚机中安装CentOS

    摘要 最近看到.net core 1发布的内容,也想尝试着在lunix上跑一圈.linux这方面的知识一直都没怎么接触过,只在工作中见同事操作过,看到满屏幕的命令行,感觉非常的高大上,趁着现在赶紧学习 ...

  6. c语言中time相关函数

    工作中遇到的函数: int seed = time(NULL); srand(seed); signal(SIGINT, stop); signal(SIGUSR1, sig_usr1); 搜time ...

  7. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. C语言动态内存分配

    考虑下面三段代码: 片段1 void GetMemory(char *p) { p = (); } void Test(void) { char *str = NULL; GetMemory(str) ...

  9. PHP 线程安全与非线程安全版本的区别深入解析

    Windows版的PHP从版本5.2.1开始有Thread Safe(线程安全)和None Thread Safe(NTS,非线程安全)之分,这两者不同在于何处?到底应该用哪种?这里做一个简单的介绍 ...

  10. 再谈 X-UA-Compatible 兼容模式

    如何理解 IE 的文档兼容模式(X-UA-Compatible)? IE 浏览器支持多种文档兼容模式,得以因此改变页面的渲染效果. IE9 模式支持全范围的既定行业标准,包括 HTML5(草案), W ...