HTML代码:

<div id="box">
<p>哈哈,随便写点内容</p>
<p>删除的实例</p>
<p>蛮试试看</p>
</div>
<button id="btn">点击</button>

CSS:

#box {
border: 1px solid #ccc;
background: #fefefe;
width: 400px;
height: 200px;
padding: 10px;
margin: 10px;
}

1.width(),height()

// width

$('#box').width();    //
$('#box').height(); //

2.innerWidth(),innerHeight()

// width + padding

$('#box').innerWidth();   //
$('#box').innerHeight(); //

3.outerWidth(),outerHeight()

// width + padding + border

$('#box').outerWidth();    //
$('#box').outerHeight(); // // width + padding + border + margin $('#box').outerWidth(true); //
$('#box').outerHeight(true); //

注意: 当outerWidth(true),outerHeight(true)参数true时,

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

  

width(),innerHTML(),outerHTML()的更多相关文章

  1. innerHTML outerHTML innerText

      迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...

  2. JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

    value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...

  3. 自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

  4. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  5. innerHTML/outerHTML; innerText/outerText; textContent

    innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...

  6. innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

    今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...

  7. js获取浏览器和设备的 width和height,

    获取宽高参考: 方法: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  8. CSS大美集

    细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,可以这样写: <div>记住密码<img src="im ...

  9. javascript面试题(一)

    答案和解析在问题下一行,为白色字体 单选题 1.以下哪条语句会产生运行错误:(a) A.var obj = ();//语法错误 B.var obj = [];//创建数组 C.var obj = {} ...

随机推荐

  1. 【M13】以by reference 方式捕捉exceptions

    1.catch语句的参数有三种方式:by pointer,by value,by reference. 2.首先考虑,by pointer.这意味着抛出端必须抛出一个对象的地址.那么问题来了: 如果这 ...

  2. air 中的 LocalStore

    <ignore_js_op> 在AIR客户端程序中有时需要将用户的一些信息保存在本地,如果信息没有涉及到隐私那么一般用SharedObject类即可将数据存储在本地.由于SharedObj ...

  3. 第一章 JavaScript概述

    JavaScript诞生于1995年.它当时的目的是为了验证表单输入的验证.因为在JavaScript 问世之前,表单的验证都是通过服务器端验证.而当时都是电话拨号上网的年代,服务器验证数据是一件非常 ...

  4. Config

    Config Config App Auth Cache Database Languages Mail Modules Routing Session Config Settings for the ...

  5. iOS 手动打造JSON Model转换库

    前一段时间学习了Runtime,对类和对象的结构,和一些消息转发有一些自己的理解,现在希望简单的应用下,就决定自己写一个简单的JSON与Model的相互转化,现在总结下. 建议查看 参考资料 :Run ...

  6. ios定制中间突出的tabBar

    我觉得有两个思路,一个是自己写tabBar  通过自定义实现,缺点呢就是比较麻烦,优点就是代码比较清楚,而且比较稳定. 另一个思路就是写个大按钮加在tabBar上 通过监听tabitem的点击来实现相 ...

  7. git 撤销修改以及删除文件

    撤销修改 1.如果当你修改了代码,然后又发现修改错误以后,想撤销前面的操作的时候该怎么办呢? 既然错误发现得很及时,就可以很容易地纠正它.你可以删掉最后一行,手动把文件恢复到上一个版本的状态.如果用 ...

  8. Asp.net MVC 4 Attributes特性

    Attributes特性 ActionFilterAttribute Represents the base class for filter attributes. 代表筛选器属性的基类. Acti ...

  9. 一步一步创建一个简单的Package(1)

    创建Package之前首先我们理解需求: 数据源是一组历史货币数据包含在平面文件SampleCurrencyData.txt中,源数据中有四列. 下面是SampleCurrencyData.txt文件 ...

  10. DOS批处理命令-@命令

    @命令是一个禁止当前语句回显的简单命令. 语法: @[command].[command]是要屏蔽的批处理命令 例如执行包含以下内容的bat文件 echo on @echo ------- @echo ...