<!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. Unity3D Multi-Compile Shader

    http://www.martinpalko.com/muli-compile-unity/ http://forum.unity3d.com/threads/tutorial-shade-more- ...

  2. FBX .NET

    https://github.com/returnString/ManagedFBX http://fbx.codeplex.com/ http://code.openhub.net/project? ...

  3. JS，JQ点击事件

    1.点击显示,再次点击隐藏 $("#pingfen-click").click(function(){ name = document.getElementById("p ...

  4. 获取ip的ip138.com

    代码: function get_onlineip() { $ch = curl_init('http://iframe.ip138.com/ic.asp'); curl_setopt($ch, CU ...

  5. 集成EaseUI报错 环信3.1.5，托入EaseUI后，系统文件报错

    一托入EaseUI的文件夹,就各种系统报错,NSObject文件也错了,不能编译UIKit头文件…………………… 解决方案以及参考文档 http://www.jianshu.com/p/291ac34 ...

  6. python 二分法查找实例（递归、循环）

    二分法,主要应用于有序序列中,原理是每次查找都将原序列折半,逐渐缩小查找范围的一种算法. 需求 要求在一个有序序列中,例如[0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30 ...

  7. 为什么要做url encode

    因为 url 对字符有限制,比如把一个邮箱放入 url,就需要使用 urlencode 函数,因为 url 中不能包含 @ 字符.

  8. 正则表达式基础---转自 Python正则表达式指南 前边

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  9. 如何在JDK1.8中愉快地处理日期和时间

    如何在JDK1.8中愉快地处理日期和时间 JDK1.8新增了LocalDate和LocalTime接口,为什么要搞一套全新的处理日期和时间的API?因为旧的java.util.Date实在是太难用了. ...

  10. dijkstra算法求最短路

    艾兹格·W·迪科斯彻 (Edsger Wybe Dijkstra,1930年5月11日~2002年8月6日)荷兰人. 计算机科学家,毕业就职于荷兰Leiden大学,早年钻研物理及数学,而后转为计算学. ...