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. /etc/vimrc配置

    [root@guolicheng ~]# cat /etc/vimrc if v:lang =~ "utf8$" || v:lang =~ "UTF-8$" s ...

  2. js中的对象、原型链机制、构造函数

    一.在js中创建对象的方式 //一.字面量或直接量创建对象 var obj1 = { name:"zs", age:12 }; //二.通过new来创建对象 var obj2 = ...

  3. SQL Server中存储过程与函数的区别

    本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个.而函数是可以嵌入在sql中使用的,可以在select中调用,而存储过程不行.执行的本质都一样. 函数限制比较多,比如不能用临 ...

  4. Liferay 7：Liferay DXP解决方案

    分享是美德,欢迎探讨技术 这个作者很厉害呀,写的博客都是解决很刁钻问题的.强烈推荐 http://www.liferaysolution.com/2017/06/captcha-recaptcha-w ...

  5. Django运行错误常见问题及解决方法1

    如果不是在JetBrains PyCharm 2017.2里创建的想在JetBrains PyCharm 2017.2里运行.可以在   编辑结构  进行配置正常使用

  6. Visual Studio 2019 正式发布

    原文链接: https://www.oschina.net/news/105629/vs2019-general-availability 如约而至,微软已于今天推出 Visual Studio 20 ...

  7. ubuntu中vi下删除键和上下左右键输入字符异常（ABCD）

    刚安装的Ubuntu系统,使用vi编辑文本的时候, 出现以下现象: 点删除键输入了 D 回车无效 上下左右为字母 光标乱跳 原因: 自带的vi功能问题 解决: 卸载原有vi,重新安装完整版本vim 执 ...

  8. bootstrap--响应式框架页面环境配置

    那就目录结构 页面环境代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <!--默认编码--& ...

  9. Firefox Developer Edition - Mozilla

    冰狐浏览器开发者工具:https://www.mozilla.org/en-US/firefox/developer/ 冰狐浏览器开发者工具:https://www.mozilla.org/en-US ...

  10. bootstrap-fileinput详细说明与使用

    介绍 bootstrap-fileinput是一款非常优秀的HTML5文件上传插件,支持文件预览.多文件上传等一系列特性. 一款非常优秀的HTML5文件上传插件,支持bootstrap 3.x 和4. ...