jQuery的width()、innerWidth()、outerWidth()方法
width():
不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。
innerWidth():
包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。
outerWidth():
包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。
<body>
<div class="box"></div>
</body>
<style>
.box{ width: 100px;height: 100px;background-color: red; }
</style>
<script>
$(function () {
//无边距
console.log("width",$(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//100px
console.log("outerWid",$(".box").outerWidth());//100px
//加padding 10px;
$(".box").css("padding", "10px");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//120px
//加border 5px
$(".box").css("border", "5px solid orange");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//130px
//加margin 10px
$(".box").css("margin", "10px");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//130px
console.log("outerWid", $(".box").outerWidth(true));//150px
})
</script>
jQuery的width()、innerWidth()、outerWidth()方法的更多相关文章
- jQuery中【width(),innerWidth(),outerWidth()】
这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...
- jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery width(), innerWidth(), outerWidth() 区别
#div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...
- jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别
width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...
- innerWidth outerWidth
在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...
- width() 、 height() 方法；innerWidth() 、innerHeight() 方法；outerWidth() 、 outerHeight() 方法的区别
1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括 ...
随机推荐
- corethink功能模块探索开发（十七）opencmf.php 配置文件
图样: opencmf.php存在于每个模块的根目录,是模块配置文件. 能进行持久化配置参数保存,一开始我以为是写文件或者做缓存,后来在数据库中发现admin_module表,存储了每个模块的配置参数 ...
- 判断元素的16中方法expected_conditions
from selenium.webdriver.support import expected_conditons as EC 1.title_is:判断当前页面的title是否完全等于预期字符串,返 ...
- centos7 vmware克隆解决网络问题
centos7克隆后,发现两台机子之间的MAC相同,无法获取IP.超找资料,解决办法如下: 只要删除网卡的配置文件中的HWADDR和UUID两行就行.使用ifup启动网卡即可.
- django（python manage.py migrate）同步数据库出错后的解决办法
执行python manage.py migrate同步数据库前一次执行 python manage.py makemigrations 时生成的文件及之后所有的文件删除即可,然后修改models.p ...
- Linux时间设置与iptables命令
日期与时间设置 timedatectl:显示目前时区与时间等信息 [root@localhost zhang]# timedatectl Local time: Thu 2018-01-18 10:1 ...
- 剑指offer编程题66道题 36-66
36.两个链表的第一个公共节点 题目描述 输入两个链表,找出它们的第一个公共结点. 1.具有重合节点的两个链表是一个Y字性,用两个堆栈放这两个链表,从尾部开始遍历,直到遍历到最后一个重合节点. 这种算 ...
- QT5.6.0 鼠标支持
QT5用QPA换了QWS之后,USB鼠标就不知道怎么支持,网上搜啊搜,各种尝试,终于可以了. export TSLIB_ROOT=/mnt/sdcard/tslib export TSLIB_PLUG ...
- NFS 安装、管理
NFS简介 NFS允许一个系统在网络上与他人共享目录和文件.通过使用NFS,用户和程序可以像访问本地文件一样访问远程系统上的文件. 安装NFS 服务端安装 NFS安装包:nfs-utils-lib.i ...
- CSS3 Loading进度条加载动画特效
在线演示 本地下载
- J2EE--Struts2基础开发笔记
内容中包含 base64string 图片造成字符过多,拒绝显示