<!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. Language Tool ,a plugin for TeXStudio

    Language Tool ,a plugin for TeXStudio TexStudio supports LanguageTool as an inline grammar checker. ...

  2. Hmmer安装与使用

    Hmmer的安装与使用   从功能基因研究的角度来讲,相关的搜索,比如从序列数据库中,找同源的序列,或者对一个对一个新的基因功能进行鉴定,使用hmmer比使用blast有着更高的灵敏度已经更高的搜索速 ...

  3. 一个有趣的模拟光照的shader

    一个有趣的模拟光照的shader(类似法线贴图) http://www.cnblogs.com/flytrace/p/3395911.html -----  可否用于需UI中需要加灯的模型.

  4. phpmyadmin 链接远程mysql

    这个只是自己的笔记 新手 不记下来以后又忘记了~ 在这以前已经给mysql设置了可以远程连接的账户 版本 phpMyAdmin-4.2.11-all-languages 解压到D盘下www   本地环 ...

  5. CSS 简介

    CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...

  6. 409. Longest Palindrome

    Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...

  7. jquery 匿名函数的区别

    下面两个定义函数的方法是等价的 var test = function(val){alert(val);} function test(val){alert(val);} 都是定义了一个test()方 ...

  8. android控件库(1)-带删除功能的EditText

    DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...

  9. sql server 得到数据库字典

    SELECT      表名=case   when   a.colorder=1   then   d.name   else   ''   end,    表说明=case   when   a. ...

  10. Python画图笔记

    matplotlib的官方网址:http://matplotlib.org/ 问题 Python Matplotlib画图,在坐标轴.标题显示这五个字符 ⊥ + - ⊺ ⨁,并且保存后也能显示   h ...