js中的width问题
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问题的更多相关文章
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- js中获取css的样式
因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...
- Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法
有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...
- js中的遍历foreach,$.each(),$().each()
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title></title ...
- js中的preventDefault与stopPropagation详解
本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...
- js中的全局变量和静态变量的使用, js 的调试?- 如果js出错, js引擎 就会停止, 这会 导致 后面的 html中 refer 该函数时, 会报错 函数为定义!!
效果里面的函数, 如show, hide,slideDown等, 这些都叫 "效果"函数, 但是里面可以包含动画, 也可以 不包含动画. 动画,是指 元素 的内容 是 逐渐 显示/ ...
- 关于JS中的JSON
早期,一般是使用XML作为互联网上传输结构化数据的,但由于它解析麻烦,字符冗长,因此被轻量级的JSON所逐渐替代.JSON是JavaScript的一个严格子集,利用了JavaScript中一些模式来表 ...
随机推荐
- 【数位DP】bnuoj 52813 J. Deciphering Oracles
http://acm.bnu.edu.cn/v3/contest_show.php?cid=9208#problem/J [AC] #include<bits/stdc++.h> usin ...
- JSP表单提交中文乱码
简要笔记:由于jsp默认表单提交编码方式是:ISO-8859-1,而我们需要的是utf-8或者是gbk码,故需要转化. 具体方法是:在表单处理文件中,将获取到的变量进行转换. String userN ...
- 表单form-input标签禁止聚焦输入
1.input标签禁止聚焦输入(针对小程序) <input type="text" disabled /> input标签禁止聚焦输入(针对网页html) 1).< ...
- hzwer与逆序对
codevs——4163 hzwer与逆序对 貌似这个题和上个题是一样的((⊙o⊙)…) 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 题目 ...
- Bestcoder Tom and matrix
问题描述 Tom放学回家的路上,看到天空中出现一个矩阵.Tom发现,如果矩阵的行.列从0开始标号,第i行第j列的数记为ai,j,那么ai,j=Cji 如果i < j,那么ai,j=0 Tom突发 ...
- Spring整合SSM的配置文件详解
在整合三大框架SSM , 即 Spring 和 SpingMVC和Mybatis的时候,搭建项目最初需要先配置好配置文件. 有人在刚开始学习框架的时候会纠结项目搭建的顺序,因为频繁的报错提示是会很影响 ...
- 解决本地调用office组件成功,但是发布到IIS中出现的错误(检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败)
在C#操作word或者Excel,我们可能会用到微软内置的COM组件,会出现很多问题. 如:在本地调试导出Excel没有问题,发布到IIS就有问题了,检测到的异常: 我们会发现在iis上运行的程序,没 ...
- gdb源码安装过程中的问题:no termcap library found
gdb使用源码安装的时候遇到错误:no termcap library found ./configure --> make --> make install 解决办法,下载termca ...
- ubuntu compile php from source code
10down vote Assuming that you already have the OpenSSL libraries and header files (on rpm systems th ...
- Lambda 表达式的演示样例-来源(MSDN)
本文演示怎样在你的程序中使用 lambda 表达式. 有关 lambda 表达式的概述.请參阅 C++ 中的 Lambda 表达式. 有关 lambda 表达式结构的具体信息,请參阅 Lambda 表 ...