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. scrollLeft/scrollTop/scrollHeight

    scrollHeight  :  It includes the element's padding, but not its border or margin.This property will ...

  2. git add命令后出现Another git process seems to be running in this repositor...错误提示

    问题原因 在控制台使用git命令操作时,使用了 git commit 进入了commit信息书写页面,大多数人因为不太熟悉vim的操作导致不知怎么结束编写,就进行了直接关闭控制台的操作,但是此时git ...

  3. 微信小程序——页面滑动事件

    wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchs ...

  4. sde中的shp数据无法编辑

    最近整理空间数据库时,用sde比较多,发现在编辑sde中的数据时总是出现数据被锁或者是被其他应用程序占用.用了很多方法处理,但不是每个方法都实用.下面讲的是我在删除shp或者给shp增加字段时所遇到的 ...

  5. SignalR 2.0 入门与提高 转载https://www.cnblogs.com/vance/p/SignalR.html

    SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP.NET SignalR2.0 1. ...

  6. [转载] OpenCV2.4.3 CheatSheet学习（三）

    四.图像处理(呵呵,重头戏来了) 1. 滤波 filter2D() 用核函数对图像做卷积. sepFilter2D() 用分解的核函数对图像做卷积. 首先,图像的每一行与一维的核kernelX做卷积: ...

  7. 使用C#反射实现用户控件调用父页面方法

    using System.Reflection; MethodInfo mi = this.Page.GetType().GetMethod("GetUserName"); //该 ...

  8. 公司jar包提交到集群的方法

    yarn -jar xx.jar 此时包会提交到集群上运行 也可以把jar包放到hbase 的lib下面用hbase jar 方式调用

  9. Leetcode142. Linked List Cycle II环形链表2

    给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 说明:不允许修改给定的链表. 进阶: 你是否可以不用额外空间解决此题? 方法一:使用map 方法二: 分两个步骤,首先通 ...

  10. Sql 竖表转横表

    ) set @sql='select t3.BID,t5.UnitName,Sort,UnitTypeSort' select @sql=@sql+' , max(case t4.id when '' ...