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. XML和HTML中常用转义字符:

    XML和HTML中都有一些特殊的字符,这些字符在XML和HTML中是不能直接使用的,如果必须使用这些字符,应该使用其对应的转义字符. XML常用转义字符: 字符 转义字符 描述 & & ...

  2. ThinkPHP3.1快速入门(13)自动完成

    自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法,使用create方法创建数据对象的时候会自动完成数据处理.因此,在ThinkPHP使用create方法来创建数据对象是更加安全的方式,而 ...

  3. Aizu 2302 On or Off dfs/贪心

    On or Off Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.act ...

  4. java nio 抛出NonWritableChannelException异常

    抛出异常的代码在此处: MappedByteBuffer buffer = channel.map(MapMode.READ_WRITE, 0, avalible); 其中channel是一个file ...

  5. android133 360 06 一键锁频,清楚数据

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  6. Jordan Lecture Note-8: The Sequential Minimal Optimization Algorithm (SMO).

    The Sequential Minimal Optimization Algorithm (SMO) 本文主要介绍用于解决SVM对偶模型的算法,它于1998年由John Platt在论文“Seque ...

  7. 读 Runtime 源码:对象与引用计数

    以前只是看了很多博客,这次打算看一下源码,并记录下来.想到哪里就读到哪里,写到哪里.读的代码版本是:objc runtime 680,可以从这里下载 https://github.com/RetVal ...

  8. Java 之 调用.Net的 WebService 整理

    最近做一个 java 调用 .net 服务的项目,其中 .net做了一个WebService,需要java来调用. 最开始.net的Service代码如下: using System; using S ...

  9. WebService地址变成计算机名的解决办法

    WCF 4.0 has solved this issue in some instances with a new config option that use Request Headers: & ...

  10. c++与c不太相同的一些地方1

    1.c++区别与java的一个地方:C++更多的是一种规范,不同时期的不同标准,提供了不同的语法要求.所以各个厂商在对C++的支持上也做得不尽相同,比如有些语法vs就支持gcc 就支持的差一些,而某些 ...