jquery中innerwidth,outerwidth,outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度;
innerWidth()方法用于获得包括内边界(padding)的元素宽度,
outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,
如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说:对于同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);
再给你一个实例,前提是正确导入jQuery,即可运行。
代码中将p元素的宽度设计为200px;运行会输出200、220、240、260。
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());
alert(obj.innerWidth());
alert(obj.outerWidth());
alert(obj.outerWidth(true));
});
});
</script>
<p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>
jquery中innerwidth,outerwidth,outerwidth和width的区别的更多相关文章
- jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...
- [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
转自:http://www.cnblogs.com/keyi/p/5933981.html jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...
- jQuery中效果animate方法解决width是百分比出现的问题
jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- [转载]jQuery中的html,val,text区别
在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...
- jquery中$.get()提交和$.post()提交有区别
jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...
- Jquery中bind和live.one,delegate的区别
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
随机推荐
- w3wp.exe(IIS ) CPU 占用 100% 的常见原因
引起 w3wp.exe(IIS ) Cpu 占用 100% 的常见原因如下: 1. Web 访问量大,从而服务器压力大而引起的 2. 动态页面(.aspx)的程序逻辑复杂程度 3. 页面程序中有死循环 ...
- Java面试题4
一.JAVA基础篇-概念1.简述你所知道的Linux: Linux起源于1991年,1995年流行起来的免费操作系统,目前, Linux是主流的服务器操作系统, 广泛应用于互联网.云计算.智能手机(A ...
- UVa 1426 Discrete Square Roots (扩展欧几里德)
题意:给定 x,n,r,满足 r2 ≡ x mod(n) ,求在 0 ~ n 内满足 rr2 ≡ x mod(n) 的所有的 rr. 析:很明显直接是肯定不行了,复杂度太高了. r2 ≡ x mod( ...
- 桌面应用开发之WPF页面导航
先看效果图 Get Start 为了项目解耦,使用mvvmlight框架.MVVM设计模式请自行了解. 1 新建项目 新建一个MvvmLight(WPF)项目,删除其中无关文件夹:Design ...
- InternalResourceViewResolver视图解析器(转)
转载地址:https://www.cnblogs.com/liruiloveparents/p/5054605.html springmvc在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就 ...
- 2019-4-22 jdbc学习笔记
jdbc 一.定义:java database connector 二.常用的接口 java.sql.Driver 驱动 java.sql.Connection 链接 java.sql.State ...
- 聊聊fetch
fetch的使用 fetch是一个发起异步请求的新api, 在浏览器(有些不支持)中可以直接使用. Promise fetch(url, init) fetch接收两个参数,第一个参数是请求路径,第二 ...
- MySQL [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause
MySQL[Err]1055 上次MySQL5.7.19主从建立完成之后,所有的测试都是在MySQL命令行下进行的,最近用Navicat Premium进行MySQL的连接,然后在插入数据的时候MyS ...
- 《http权威指南》读书笔记1
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- 你不知道的console调试
概述 浏览器的开发者工具我们经常用,console.log我们也经常用,但是console还有其它一些方便调试的命令,我总结了几个常用的记录在下面,供以后开发时参考,相信对其他人也有用. 获取js执行 ...