innerWidth

This method returns the width of the element, including left and right padding, in pixels.

If called on an empty set of elements, returns undefined (null before jQuery 3.0).
This method is not applicable to window and document objects; for these, use .width() instead.

innerWidth("value")

    When calling .innerWidth("value"), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as 100px, 50%, or auto). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the box-sizing CSS property is used.If no explicit unit is specified (like "em" or "%") then "px" is assumed.

demo如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>innerWidth</title>

    <style>

        p { margin: 10px;padding: 5px;border: 2px solid #;}

        em {color: red;}

        div { width: 60px;padding: 10px;height: 50px;float: left;margin: 5px;background: red;cursor: pointer;}

        .mod { background: blue;cursor: default;}

    </style>

</head>

<body>

    <strong><em>innerWidth</em>:This method returns the width of the element, including left and right padding, in pixels. If called on an empty set of elements, returns undefined (null before jQuery 3.0).

This method is not applicable to window and document objects; for these, use .width() instead.</strong>

    <p>Hello</p>

    <p></p>

    <blockquote> <strong><em>innerWidth("value")</em> : When calling .innerWidth("value"), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as 100px, %, or auto). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the box-sizing CSS property is used.If no explicit unit is specified (like "em" or "%") then "px" is assumed.</strong></blockquote>

    <div>d</div>

    <div>d</div>

    <div>d</div>

    <div>d</div>

    <div>d</div>

<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>

<script>

    $(function(){

    var p = $( "p:first" );

    $( "p:last" ).text( "innerWidth:" + p.innerWidth() );

    $(window).resize(function(event) {

          $( "p:last" ).text( "innerWidth:" + p.innerWidth() );

     });

    var modWidth = ;

    $( "div" ).one( "click", function() {

    $( this ).innerWidth(modWidth).addClass( "mod" );

    modWidth -= ;

    });

})

</script>

</script>

</body>

</html>

样式如下：

jquery的innerWidth 和 innerHeight的使用的更多相关文章

  1. jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  2. [转]jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

  3. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  4. width() 、 height() 方法；innerWidth() 、innerHeight() 方法；outerWidth() 、 outerHeight() 方法的区别

    1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括 ...

  5. jquery中innerwidth，outerwidth，outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  6. jquery width(), innerWidth(), outerWidth() 区别

    #div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...

  7. Jquery中的height(),innerHeight(),outerHeight()的区别

    前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...

  8. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

  9. position为absolute的元素如何实现居中

    当给div设置absolute时,该元素已经脱离文档流,呈现浮动状态,只能通过left,top,right,bottom来设置属性,要实现居中有两种方法: 一.css法 <div class=& ...

随机推荐

  1. sql 2000 or sql2005 数据库日志删除

    数据库日志清理(sql 2000 or sql2005)DUMP TRANSACTION crm WITH NO_LOGBACKUP LOG crm WITH NO_LOGDBCC SHRINKDAT ...

  2. Web API 接口说明文档

    1.采用 Web API Help Page 显示效果 2.swaggerui 创建文档接口 效果图 3.swagger ui 安装配置 nuget 安装 2.设置xml文件 3.配置根路径 预览sw ...

  3. 组件：参数验证props:组件参数验证语法

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. 结构体的sort排序

    结构体用sort快排的方法 struct node{ int k,s; }p[]; bool cmp1(node x,node y){ return x.s>y.s; //定义降序排序(从大到小 ...

  5. vscode, eslint, prettier, vetur冲突及解决

    这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.一 从0开始1. 禁止工作区插件, 如下图:  2. 清空用户设置(Code–>首选项–>设置–>[右上角 ...

  6. gulp入门之常见处理方式（三）

    整合 streams 来处理错误 默认情况下,在 stream 中发生一个错误的话,它会被直接抛出,除非已经有一个时间监听器监听着 error时间. 这在处理一个比较长的管道操作的时候会显得比较棘手. ...

  7. hbase设计方案1

    好的方案应该挺多的,比如:可以将[日.周.月]以3,2,1来表示(拼接到ROW_KEY中){离线跑job时候,可以分为月job(每月末run一下,周job(每周末run一下),日job(每天run一下 ...

  8. 百度地图JavaScript API申请密钥注意要点

    1.应用类型:浏览器端 2.启用服务:Javascript API要勾选 3.IP白名单:*即可

  9. LUOGU P1290 欧几里德的游戏

    题目描述 欧几里德的两个后代Stan和Ollie正在玩一种数字游戏,这个游戏是他们的祖先欧几里德发明的.给定两个正整数M和N,从Stan开始,从其中较大的一个数,减去较小的数的正整数倍,当然,得到的数 ...

  10. View的滑动原理和多种滑动方法

    参考链接: http://blog.csdn.net/chunqiuwei/article/details/50679568# http://blog.csdn.net/zly921112/artic ...