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. ios项目不能再用UDID了

    今天更新项目时,出现 Apps are note permitted to access the UDID and must not use the uniqueIdentifier method o ...

  2. android常见错误-The container 'Android Dependencies' references non existing library

    The container 'Android Dependencies' references non existing library

  3. [置顶] 用Wireshark保存RTP的负载码流

    这段时间工作太忙,有些日子没写文章了,今天准备了一篇Wireshark工具的一个小功能,在验证码流的时候非常好用,闲话不说,直接说步骤: 1.打开Wireshark抓取流媒体码流,然后用RTP过滤: ...

  4. 如何用JAVA生成注册序列号

    原文:http://blog.csdn.net/eagleking012/article/details/7099900 平常我们都接触过软件注册,输入序列号.激活码.注册码.授权码:对于这些字符码到 ...

  5. [Practical Git] Filter commit history with git log arguments

    In the last lesson, we learned how to format the git log output; in this lesson we will learn how to ...

  6. S5PV210(TQ210)裸机编程

    本文很多其它的是教会大家怎样学习. 4.1    汇编学习 4.1.1 基础知识     4.1.2 ARM模拟器 4.2    S5PV210启动流程 4.3    点亮一个LED 4.4    串 ...

  7. careercup-排序和查找 11.7

    11.7 有个马戏团正在设计叠罗汉的表演节目,一个人要站在另一人的肩膀上.处于实际和美观的考虑,在上面的人要比下面的人矮一点.轻一点.已知马戏团每个人的高度和重量,请编写代码计算叠罗汉最多能叠几个人. ...

  8. 学习opencv中文版教程——第二章

    学习opencv中文版教程——第二章 所有案例,跑起来~~~然而并没有都跑起来...我只把我能跑的都尽量跑了,毕竟看书还是很生硬,能运行能出结果,才比较好. 越着急,心越慌,越是着急,越要慢,越是陌生 ...

  9. linux命令 --> cd命令

    关于linux的命令这里进行简单的说明一下(简单的说明哦!!) 对于linux和windows基本的操作就是切换目录,因为只有进入目录时,才能看到里面的内容(对于linux这说的不太准确必定还有ls呢 ...

  10. elfinder-2.x的java servlet后端——elfinder-2.x-servlet

    去年在美期间在外导的项目中,需要用到el-finder的完美界面,但苦于没有java后端,因此做了一个elfinder-2.x-servlet. 托管地址:https://github.com/blu ...