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中一些模式来表 ...
随机推荐
- 625. Minimum Factorization
Problem statement Given a positive integer a, find the smallest positive integer b whose multiplicat ...
- 【单调队列+二分查找】bzoj 1012: [JSOI2008]最大数maxnumber
[题意] 维护一个单调递减的q数组,用id数组记录q数组的每个下标对应在原数组的位置,那么id数组一定有单调性(q数组中越靠后,原数组中也靠后),然后二分查找这个数 [AC] #include< ...
- mybatis配置报错(properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrapperFactory?,reflectorFactory?,plugins?,environments?,databaseIdProvider?,mappers?)
如下报错:解决方案:要按照提示的顺序添加属性,(properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrappe ...
- idea打包SpringBoot项目打包成jar包和war
- 打包成jar包 1. <groupId>com.squpt.springboot</groupId> <artifactId>springbootdemo< ...
- Java远程调用BPS流程实现流程运行简单示例
1.简介:略 2.背景:略 3.目的:自我学习笔记 4.实现过程 (1).画出流程图 如下: 路由活动分支下的条件语句为复杂表达式: ((account<200&&divisio ...
- jQuery事件委托之Safari失效的解决办法--摘抄
什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
- PHP 之命名空间
文件A.php namesspace a\b; Class User{ function get_user(){ echo 'this is A Class'; } } 文件B.php namessp ...
- 533. Lonely Pixel II
Given a picture consisting of black and white pixels, and a positive integer N, find the number of b ...
- UVA11825 Hackers' Crackdown
题目描述 PDF 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 3 2 1 2 2 0 2 2 0 1 4 1 1 1 0 1 3 1 2 0 输出样例#1: Case 1: 3 ...
- winform客户端程序实时读写app.config文件
新接到需求,wcf客户端程序运行时,能实时修改程序的打印机名称: 使用XmlHelper读写 winform.exe.config文件修改后始终,不能实时读取出来,查询博客园,原来已有大神解释了: 获 ...