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. MyEclipse6.5增加对Tomcat7的支持

    MyEclipse6.5增加对Tomcat7的支持 最近在研究Servlet3.0,它是JavaEE6.0规范中的一部分 而Servlet3.0对服务器是有要求的,比如Tomcat7+(而Tomcat ...

  2. Python入门--番外--中文目录乱码问题

    写Python的程序,读取含有中文目录下的文件,结果发现根本读取不了该中文目录下的文件, 原因:通过调试发现:该文件的目录乱码,目录无法解析,自然导致无法读取文件内容 解决方法: strPath = ...

  3. go初识

    for循环 ; i < ; i++ { fmt.Println(i*i) } ls := "agd" for _, arg := range ls{ fmt.Println( ...

  4. 2017 ACM/ICPC 广西邀请赛 题解

    题目链接  Problems HDOJ上的题目顺序可能和现场比赛的题目顺序不一样, 我这里的是按照HDOJ的题目顺序来写的. Problem 1001 签到 #include <bits/std ...

  5. 《Java虚拟机原理图解》 1.1、class文件基本组织结构

    作为Java程序猿,我们知道,我们写好的.java 源代码,最后会被Java编译器编译成后缀为.class的文件,该类型的文件是由字节组成的文件,又叫字节码文件.那么,class字节码文件里面到底是有 ...

  6. tcp-time-wait-state

    https://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux

  7. Linux 开发板网络设置

    改动IP地址步骤: ①改动/etc/eth0-setting 命令:vi /etc/eth0-setting ②改动对应的信息.最后:wq退出 ③重新启动eth0 命令:/etc/init.d/ifc ...

  8. memcached优化方法

    工作原理     基本概念:slab,page.chunk.     slab,是一个逻辑概念. 它是在启动memcached实例的时候预处理好的,每一个slab相应一个chunk size.也就是说 ...

  9. Solidworks打印工程图超出范围了怎么办

    打印预览,边框部分无法显示   页面设置,比例改为90%,试一下   正常了,如果你还是无法正常显示,就再改小比例

  10. 安卓自己定义View进阶-Canvas之绘制基本形状

    Canvas之绘制基本形状 作者微博: @GcsSloop [本系列相关文章] 在上一篇自己定义View分类与流程中我们了解自己定义View相关的基本知识,只是,这些东西依然还是理论,并不能拿来(zh ...