1、在jQuery中,width()方法用于获得元素宽度;
innerWidth()方法用于获得包括内边界(padding)的元素宽度,
outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。

width()<=innerWidth()<=outerWidth()<=outerWidth(true);

<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>

输出的结果是:200,220,240,260. <p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>

  

js中的width问题的更多相关文章

  1. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  2. js中获取css的样式

    因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...

  3. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  4. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  5. 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法

    有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...

  6. js中的遍历foreach,$.each(),$().each()

    <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title></title ...

  7. js中的preventDefault与stopPropagation详解

    本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...

  8. js中的全局变量和静态变量的使用, js 的调试?- 如果js出错, js引擎 就会停止, 这会 导致 后面的 html中 refer 该函数时, 会报错 函数为定义!!

    效果里面的函数, 如show, hide,slideDown等, 这些都叫 "效果"函数, 但是里面可以包含动画, 也可以 不包含动画. 动画,是指 元素 的内容 是 逐渐 显示/ ...

  9. 关于JS中的JSON

    早期,一般是使用XML作为互联网上传输结构化数据的,但由于它解析麻烦,字符冗长,因此被轻量级的JSON所逐渐替代.JSON是JavaScript的一个严格子集,利用了JavaScript中一些模式来表 ...

随机推荐

  1. N*N数码问题

    奇数码问题 时间限制: 1 Sec  内存限制: 128 MB 题目描述 你一定玩过八数码游戏,它实际上是在一个3*3的网格中进行的,1个空格和1~8这8个数字恰好不重不漏地分布在这3*3的网格中. ...

  2. Mongodb_分片集群模式

    前面介绍的副本集模式实现了数据库高可用. 但是还是存在的问题是: 所有的从节点都是从主节点全面拷贝,这样数据量过大时,从节点压力大.还有就是海量数据时存在硬件瓶颈, 毕竟每一个机器的存储量总是有限的. ...

  3. jQuery插件封装系列(一)—— 金额录入框

    基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type ...

  4. poj 3461 hash解法

    字符串hash https://blog.csdn.net/pengwill97/article/details/80879387 https://blog.csdn.net/chaiwenjun00 ...

  5. TortoiseSVN如何更换或重置登录用户

    昨天手贱把svn重新卸载了,再安装后便与之前的项目断了,因为第一次使用这个,也不清楚再怎么登录,还有就是上次是使用别人的账号,也不知道怎么清除别人的账号. 鼠标右键找到settings,点击打开 找到 ...

  6. UVA 11346 Probability

    题目描述 PDF 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 3 10 5 20 1 1 1 2 2 0 输出样例#1: 23.348371% 0.000000% 100.00 ...

  7. Flink学习(一)

    Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时,提供支持流处理和批处理两种类型应用的功能. 现有的开源计算方案,会把流处理和批处理作为 ...

  8. Java代码规范和质量检查插件-Checkstyle(官方资源)

    其实Checkstyle是一个JAR包,然后第三方开发者开发了Eclipse/IDEA的插件. 官网: https://github.com/checkstyle/checkstyle Eclipse ...

  9. GeoServer发布Heatmap

    转自原文 GeoServer发布Heatmap 百度等热力图是使用开源的heatmap.js做的,但是这种解决方案的缺陷是: 1 数据量大的话,从前端通过后台查询比较费时,比如arcserver默认设 ...

  10. XP操作系统设置:[82]关机快捷键

    磨镰刀不少割麦,掌握了快速关机的多种方法,在尴尬的时候说不定还真能派上用场呢.   工具/原料   手提电脑.台式电脑.Windows 操作系统. 方法一:   1 Windows XP 操作系统中有 ...