JQuery 关于位置的计算（重要）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} body {
background: black;
} #main {
width: 200px;
height: 200px;
margin: 3px;
padding: 5px;
border: 7px solid red;
position: absolute;
top: 30px;
left: 50px;
}
</style>
<script type="text/javascript">
$(function() {
console.log('$("#main").width():' + $("#main").width());
console.log('$("#main").innerWidth():' + $("#main").innerWidth());
console.log('$("#main").outerWidth():' + $("#main").outerWidth());
console.log('$("#main").outerWidth(true):' + $("#main").outerWidth(true));
console.log('$("#main").position():' + $("#main").position().top + "," + $("#main").position().left);
console.log('$("#main").offset():' + $("#main").offset().top + "," + $("#main").offset().left);
})
</script>
</head> <body>
<div id="main"> </div>
</body> </html>
JQuery 关于位置的计算（重要）的更多相关文章
- 前端 -----jQuery的位置信息
08-jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- jQuery的位置信息
<head> <meta charset="UTF-8"> <title>jquery的位置信息</title> <style ...
- jQuery之位置
1.offset()获取匹配元素在相对浏览器窗口的偏移量 返回一个对象,包括两个属性.left:相对浏览器窗口左边的距离.top:相对浏览器顶部的距离. $("#div1").o ...
- Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 07 jQuery的位置信息
一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...
- jQuery系列（八）：jQuery的位置信息
1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...
- JS HTML标签尺寸距离位置定位计算
四种浏览器对 clientHeight.offsetHeight.scrollHeight.clientWidth.offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽:do ...
- jQuery学习- 位置选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- rpmdb: Thread/process 9180/139855524558592 failed: Thread died in Berkeley DB library
使用yum安装出现问题:rpmdb: Thread/process 9180/139855524558592 failed: Thread died in Berkeley DB library 解决 ...
- hdu 5875(单调栈)
Function Time Limit: 7000/3500 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total ...
- 通过EPROCESS获取进程名
上一篇写自我保护时用到了,主要是不同版本的位置不同.找了一下,发现XP和win7的情况分别如下. WIN7 lkd> dt nt!_EPROCESS +0x000 Pcb : _KPROCESS ...
- jmeter-----用户参数和用户定义变量的区别
在调试脚本的时候,可以使用前置处理器中的用户参数组件进行数据的提供,在该数据中可以使用固定值也可以使用变量值. 如果是固定不变的一些配置项,不需要多个值的时候,也可以使用用户已定义的变量组件. 一.界 ...
- loadrunner可用许可证
global-100: AEAMAUIK-YAFEKEKJJKEEA-BCJGIweb-10000: AEABEXFR-YTIEKEKJJMFKEKEKWBRAUNQJU-KBYGBglobal-10 ...
- 【WPF】城市级联（XmlDataProvider）
首先在绑定的时候进行转换: public class RegionConverter : IValueConverter { public object Convert(object value, T ...
- ubuntu下 pycharm使用andcoda下的tensorflow
在ubuntu中 tensorflow是安装在andconda里的一个虚拟环境中,他就相当于一个容器,将tensorflow的整个环境去模拟隔离出来,因为我们直接使用andconda库去作为pycha ...
- FastReport.Net使用：[19]复选框的使用
FastReport中,用好复选框会使报表更美观. 复选框的用法举例: 1.点菜系统中,打印用户点菜时,将已点的菜进行打“√”标记等. 2.选课系统中,将已选科目进行打“√”等. 认识复选框 复选框只 ...
- 【BZOJ 3144】 3144: [Hnoi2013]切糕 （最小割模型）
3144: [Hnoi2013]切糕 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1764 Solved: 965 Description Inp ...
- [BZOJ5334][TJOI2018]数学计算(exgcd/线段树)
模意义下除法若结果仍为整数的话,可以记录模数的所有质因子,计算这些质因子的次幂数,剩余的exgcd解决. $O(n\log n)$但有9的常数(1e9内的数最多有9个不同的质因子),T了. #incl ...