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. Django中间件初始化过程

    def load_middleware(self): """ Populate middleware lists from settings.MIDDLEWARE. Mu ...

  2. 第五章 Odoo 12开发之导入、导出以及模块数据

    大多数Odoo 模块的定义,如用户界面和安全规则,实际是存储在对应数据表中的数据记录.模块中的 XML 和 CSV 文件不是 Odoo 应用运行时使用,而是载入数据表的手段.正是因为这个原因,Odoo ...

  3. 第四章 Odoo 12 开发之模块继承

    Odoo 的一个强大功能是无需直接修改底层对象就可以添加功能.这是通过其继承机制来实现的,采取在已有对象之上修改层来完成.这种修改可以在不同层上进行-模型层.视图层和业务逻辑层.我们创建新的模块来做出 ...

  4. php对输入的检测

    $data['value'] = trim(stripslashes(htmlspecialchars_decode($value)));

  5. tornado nginx 同源（Access-Control-Allow-Origin）错误处理记录

    如果以下两个步骤操作完还是没有解决问题,可能是因为程序出了别的错误,因为后来的调试中不论出什么问题它都是会返回同源错误..呵呵哒 1.在nginx.conf里配置server,在location里添加 ...

  6. OSGi.NET使用笔记

    一手资料来源于“开放工厂”,以下程序将会引用到一个核心文件UIShell.OSGi.dll 目前我对于OSGi这个框架的理解就是,主程序搜索并加载插件,以插件方式开放,便于扩展. 现在开始正式的旅程. ...

  7. 通过Angular-cli创建新项目

    前提:已经安装Git 方法一:(推荐) 1.在需要创建项目的文件夹中右键打开 Git Bush Here ,在此输入  ng new ‘项目名’  --skip-install   (如下my-app ...

  8. PAT甲级——A1020 Tree Traversals

    Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...

  9. 封装原生JavaScript的ajax

    function obj2str(data) { data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 data.t = new Date().getTi ...

  10. MySQL数据库 字段操作 多表关系(更新中...)

    外键 (foreign key) ## 外键 ```mysql # 作者(author):id,name,sex,age,mobile, detail_id # 作者详情(author_detail) ...