width(),innerHTML(),outerHTML()
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()的更多相关文章
- innerHTML outerHTML innerText
迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...
- JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...
- 自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性
01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML/outerHTML; innerText/outerText; textContent
innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...
- innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...
- js获取浏览器和设备的 width和height,
获取宽高参考: 方法: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...
- CSS大美集
细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,可以这样写: <div>记住密码<img src="im ...
- javascript面试题(一)
答案和解析在问题下一行,为白色字体 单选题 1.以下哪条语句会产生运行错误:(a) A.var obj = ();//语法错误 B.var obj = [];//创建数组 C.var obj = {} ...
随机推荐
- SQL Server笔记
SQL Server所能读取的最小单位是页,每个页8KB,8个物理上连续的页就是一个区,这样数据库中每MB就包含有16个区 堆是没有聚集索引的表.如果表格上没有聚集索引,数据行将不按任何特殊顺序存储, ...
- Python 调用C++
1.C++代码提供Python需要的接口: #include "stdafx.h" #include <boost/python.hpp> #include <s ...
- Codeforces Round #321 (Div. 2) C. Kefa and Park dfs
C. Kefa and Park Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/probl ...
- Ubuntu12.10硬盘安装
今天介绍如下如何在Win7环境下从硬盘安装Ubuntu(我使用的版本是12.10). 1.下载Ubuntu ISO镜像文件ubuntu-12.10-desktop-i386.iso. 2.使用压缩软件 ...
- 《Java并发编程实战》第十五章 原子变量与非堵塞同步机制 读书笔记
一.锁的劣势 锁定后假设未释放.再次请求锁时会造成堵塞.多线程调度通常遇到堵塞会进行上下文切换,造成很多其它的开销. 在挂起与恢复线程等过程中存在着非常大的开销,而且通常存在着较长时间的中断. 锁可能 ...
- WaterWave
WaterWave.rar
- CentOS安装Nginx安装详解
一.准备工作,安装依赖包,缺一不可!(推荐先用命令查看自己是否已经安装一下软件,确认没有再安装) --------------------------------------------------- ...
- ABAP 日期函数
一 财务期间处理 T_CODE: OB29 **取 公司年度变式, 和 货币 SELECT SINGLE waers periv FROM t001 INTO (v_waers,v_p ...
- eclipse+ADT 进行android应用签名详解
http://jojol-zhou.iteye.com/blog/719428 1.Eclipse工程中右键工程,弹出选项中选择 android工具-生成签名应用包: 2.选择需要打包的android ...
- linux中的工具
远程连接linux的工具: 命令行: SecureCRT putty XShell(商业环境付费) 图形界面:WinSCP SecureFX 远程连接window服务器工具: FileZilla ...