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. PHP 类与对象 全解析方法

    1.类与对象 对象:实际存在该类事物中每个实物的个体.$a =new User(); 实例化后的$a 引用�php的别名,两个不同的变量名字指向相同的内容 封装: 把对象的属性和方法组织在一个类(逻辑 ...

  2. JZOJ5966【NOIP2018提高组D2T3】保卫王国（并查集）

    题目 还是懒得把题目放上来了. 大意:给你一棵带点权的树,你要花费一些代价选择一些点使得相邻的两个点至少有一个被选. 然后有很多个询问,每个询问强制两个点的状态,问强制了这两个点的状态后的方案. 比赛 ...

  3. spring_配置处理器对象、处理器映射器、处理器适配器、视图解析器

    创建spring配置文件:application-context.xml. 创建处理器类 package com.lanou.demo.controller;public class BookCont ...

  4. BZOJ 1822[JSOI2010]Frozen Nova 冷冻波

    网络流+二分. n^3枚举判断每个巫妖可以攻击的精灵,向其连1的边,每个精灵向汇点连1的边. 二分答案,修改源点流向每个巫妖的cap,跑最大流看是否等于精灵数. 恩,看起来没什么毛病. 然后狂WA不止 ...

  5. Python实现十大经典排序算法（史上最简单）

    十大排序算法(Python实现)一. 算法介绍及相关概念解读 算法分类十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn), ...

  6. Eureka自我保护机制、健康检查的作用、actuator模块监控

    在上一篇文章微服务入门之服务的注册以及服务之间的调用中,我们基本实现了服务之间的调用,今天我们来了解一下Eureka自我保护机制以及健康检查. Eureka自我保护机制 接着以上篇文章建立的三个工程为 ...

  7. redis常见的面试题

    redis和memched有什么区别,为什么单线程的redis比多线程的memched效率高 string:ky类型 hash:字典redis的哈希结构可以使你像在数据库中更新一个属性一样只修改某一项 ...

  8. react-native连接华为真机

    android studio的设置:下载google USB Driver 手机部分1.找到手机开发者模式 设置->系统->关于手机->版本号(多次点击出现开发者模式) 提示你已在开 ...

  9. PHP苹果推送实现（APNS）

    以下资料网上收集整理得来 1.在ios dev center制作相关证书和文件用客户端实现(不再赘述,网上很多,) 网上教程: http://blog.csdn.net/lizhenning87/ar ...

  10. iBaties对比hibernate

    翻译至一篇2008年的文章(http://www.javaworld.com/article/2077875/open-source-tools/ibatis--hibernate--and-jpa- ...