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. Java算法实例集合(2)

    这是Standford一位计算机老师的私藏,里面包含了不少Java/C++的算法实现代码.有兴趣的朋友可以看看.

  2. p2p項目”復活“之想

    http://blog.csdn.net/christopherwu/article/details/23976503 原來以為p2p項目就要夭折,墮入絕望無奈的深淵之時,與多位朋友的交流,抬頭看見了 ...

  3. 使用Zipalign工具优化Android APK应用记录

    生成的Android应用APK文件最好进行优化,因为APK包的本质是一个zip压缩文档,经过优化能使包内未压缩的数据有序的排列,从而减少应用程序运行时的内存消耗.我们可以使用Zipalign工具进行A ...

  4. 信号之abort函数

    abort函数的功能是使异常程序终止. #include <stdlib.h> void abort(void); 此函数不返回 此函数将SIGABRT信号发送给调用进程(进程不应忽略此信 ...

  5. JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

    一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...

  6. C#_dropdownlist_1

    关于ASP.net MVC 中DropDownList绑定与提交数据   在做 ASP.net MVC项目中,数据绑定也是很关键的,现在以个人经验与大家交流下 ASP.net MVC 中DropDow ...

  7. java_spring_依赖注入(构造器)

    依赖注入对象可以 手工装配(建议) 和 自动装配 package com.PersonDaoBean.test; public interface PersonDao { public abstrac ...

  8. iOS9横竖屏设置的处理方法

    在一般的视频类APP播放的时候都会支持横屏,这样做的好处就是便于观看.你的项目中支持横屏吗?我们一起了解一下,在iOS9中横竖屏设置的处理方法吧! 支持横竖屏配置 在iOS6以后,如果APP需要支持横 ...

  9. GWT 中日期格式化 ,处置Date

    GWT的view中不能用java原生的DateFormat 必须使用gwt封装的格式化方法,方法如下 import com.google.gwt.i18n.client.DateTimeFormat; ...

  10. 数据库中的DDL和DML语言

    "D:\mysql-5.6.22-winx64\bin"添加到系统环境变量path中了,然后在任意目录可访问mysql等命令,这样如登录等操作就不需要进入MySQL安装目录才好执行 ...