jquery盒模型元素尺寸设置
jQuery有多个处理元素尺寸的方法
width():设置或返回元素的宽度(不包括padding、border、和margin)
height():设置或返回元素的高度(不包括padding、border、和margin)
innerWidth():返回元素的宽度(包括padding)
innerHeight():返回元素的高度(包括padding)
outerWidth():返回元素的宽度(包括padding和border)
outerHeight():返回元素的高度(包括padding和border)
outerWidth(true):返回元素的宽度(包括padding、border和margin)
outerHeight(true):返回元素的高度(包括padding、border和margin)
实际上innerWidth()和innerHeight()也可以设置元素的宽度和高度,只不过用这种方法设置会自动减去padding值以计算元素内容的尺寸。
比如当我把一个div设成这个样子:
div {
width: 100px;
height: 100px;
padding: 10px;
background-color: #ccc;
}
可以看到元素的尺寸是这样的:
而当我使用innerWidth()设置元素时:
$("div").innerWidth("140px");
可以看到元素变成这个样子:
说明innerWidth()会将减去padding后多余的值加到元素内容上。
outerWidth()和outerHeight()也是一样,还要减去border值。
不过正常人很少会使用这种方法设置元素的尺寸吧?
jquery盒模型元素尺寸设置的更多相关文章
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- 第七十三节,css盒模型
css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
随机推荐
- C#电脑自动关机代码指令
Process p = new Process();//实例化一个独立进程 p.StartInfo.FileName = "cmd.exe";//进程 ...
- 重叠I/O之可等待的重叠I/O【系列一】
一 什么是异步I/O 同步I/O和异步I/O的关键不同就是在发出I/O请求后,线程是否会阻塞.当线程发出一个设备I/O请求的时候,线程会被挂起来,直到设备完成I/O请求为止,这称之为同步I/O.而对于 ...
- Contoso 大学 - 3 - 排序、过滤及分页
原文 Contoso 大学 - 3 - 排序.过滤及分页 目录 Contoso 大学 - 使用 EF Code First 创建 MVC 应用 原文地址:http://www.asp.net/mvc/ ...
- Excel常用函数
1.基本的算数函数 sum() average() 2.三角函数 sin() cos() 3.
- NSS_03 过滤器
asp.net mvc3有四类过滤器:授权, 操作,结果, 异常.操行的顺序为:授权,操作,结果,异常. 首先看一下TempData: 数据只能经过至多一次的Controller传递, 并且每个元素至 ...
- C#利用开源软件ffMpeg截取视频图片
#region 从视频画面中截取一帧画面为图片 /// <summary> /// 从视频画面中截取一帧画面为图片 /// </summary> /// <param n ...
- <script type="text/html"></script> js模版使用
<div></div> <script type="text/html" id="javascript_template"> ...
- 图片grayscale(灰阶效果)webkit内核支持。
filter:gray;-webkit-filter: grayscale(100%); 置为灰阶等hove时候 -webkit-filter: grayscale(0%);显示出彩色.
- php 操作mongodb
在这里首先说一下mongo 客户端安装完成有时会启动失败 这里解决办法就是 删除 D:\mongodb\db 下的 mongod.lock文件即可 再重新启动 首先下载mongodb php扩 ...
- PHP实现获得一段时间内所在的所有周的时间
function getWeek($startdate,$enddate) { //参数不能为空 if(!empty($startdate) && !empty($enddate)){ ...