<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

            alert($('div').width());          //width

            alert($('div').innerWidth());      //width+padding

            alert($('div').outerWidth());      //width+padding+border

            alert($('div').outerWidth(true));     //width+padding+border+margin

        });

    </script>

</head>

<body>

<div style="width: 100px; height: 100px; padding: 10px; border: 4px solid red; margin: 5px; background: blue;" ></div>

</body>

</html>

jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】的更多相关文章

  1. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

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

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

  3. jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别

    width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...

  4. jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

    在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...

  5. jQuery—一些常见方法（1）【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】

    1.filter()和not()方法 filter()和not()是一对反方法,filter()是过滤. filter()方法是针对元素自身.(跟has()方法有区别) <script type ...

  6. jQuery—一些常见方法（2）DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

    一.insertBefore() 如下代码:找到span标签,将span标签剪切到div的前面 <!DOCTYPE html> <html lang="en"&g ...

  7. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  8. innerWidth outerWidth

    在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...

  9. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

随机推荐

  1. C++ 过载，重写，隐藏

    1.过载:在一个类中(也就是一个作用域),方法名相同,形参表不同的方法. 2.重写:父类方法使用virtual,子类方法和方法的方法名,形参表,返回类型相同,子类可以不使用virtual,但是建议使用 ...

  2. ORM之二：核心接口与扩展操作

    一.数据库提供者接口 /// <summary> /// 数据库提供者 /// </summary> public interface IDbProvider : IDispo ...

  3. [AngularJS] angular-schema-form -- 1

    Check out on gitHub, see the example on Demo page, see the document, extension. Mainly, there are th ...

  4. EasyARM i.mx28学习笔记——开箱试用总结

    0 前言     本月初(2014年8月)购买了周立功的EasyARM开发板,主控为EasyARM i.mx287.出于下面几个理由购买了该开发板.     [1]主要原因,有人约我一起学习一起使用该 ...

  5. android115 自定义控件

    布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  6. js hash字符串转成json

    var a='account.type=1&account.id=&account.dependFlag=0&account.card.companyId=1&acco ...

  7. java_JdbcUtilis_单实例

    //eg1,没有使用单实例,eg2有 package cn.itcast; import java.sql.Connection; import java.sql.DriverManager; imp ...

  8. chosen 下拉框

    $("#teams").trigger("liszt:updated");//更新重新绑定                            $(" ...

  9. 关于Eclipse Modeling Framework进行建模,第二部分

    使用 Eclipse Modeling Framework 进行建模,第 2 部分 Eclipse 的 Java Emitter Templates(JET) 是一个开放源代码工具,可以在 Eclip ...

  10. 关于Extjs使用window.opener报错

    项目中使用window.opener 刷新父窗口表格,父窗口表格IE8报错, window.opener.Ext.getCmp('SalesCompanyGridPanel').getStore(). ...