<!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 关于位置的计算（重要）的更多相关文章

  1. 前端 -----jQuery的位置信息

    08-jQuery的位置信息   jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...

  2. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. jQuery的位置信息

    <head> <meta charset="UTF-8"> <title>jquery的位置信息</title> <style ...

  4. jQuery之位置

    1.offset()获取匹配元素在相对浏览器窗口的偏移量 返回一个对象,包括两个属性.left:相对浏览器窗口左边的距离.top:相对浏览器顶部的距离.  $("#div1").o ...

  5. Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. 07 jQuery的位置信息

    一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...

  7. jQuery系列（八）：jQuery的位置信息

    1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...

  8. JS HTML标签尺寸距离位置定位计算

    四种浏览器对 clientHeight.offsetHeight.scrollHeight.clientWidth.offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽:do ...

  9. jQuery学习- 位置选择器

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

随机推荐

  1. [ python ] 初始面向对象

    首先,通过之前学习的函数编写一个 人狗大战 的例子. 分析下这个需求,人 狗 大战  三个事情.角色:人.狗动作:狗咬人,人打狗 先创建人和狗两个角色: def person(name, hp, ag ...

  2. CentOS 7.1使用yum安装MySql5.6.24

    http://www.cnblogs.com/yuanfeiblog/p/5276492.html

  3. 推荐一个数据相关的网站tushare

    推荐一个网站:tushare 使用方法如下: pip install tushare 我是使用pycharm直接安装的 抓取了浦发和光大的股票数据,并通过csv进行保存,和通过plt进行图片打印 im ...

  4. 打开Office2007弹出“向程序发送命令时出现问题” 解决方案

    打开Office2007弹出“向程序发送命令时出现问题” 解决方案,试了很多方案,最终还是这种方法帮我解决了问题,分享下,以下地址便是: http://club.excelhome.net/threa ...

  5. 关于js函数 形参和局部变量名相同 的问题

    原文:https://segmentfault.com/q/1010000007278354?_ea=1295176 问题: function f1(a) { console.log(a);// 10 ...

  6. objective-c Quick Reference

  7. 语音性别识别 - 使用R提取特征

    步骤 1)安装R.windows操作系统安装包的链接:https://cran.r-project.org/bin/windows/base/ 2)切换当前路径为脚本所在路径 点击 文件 > 改 ...

  8. GUC-5 CountDownLatch闭锁

    /* * CountDownLatch :闭锁,在完成某些运算是,只有其他所有线程的运算全部完成,当前运算才继续执行 */ public class TestCountDownLatch { publ ...

  9. win10自动更新失败

    十一过后,win10 总是提示自动更新失败,每天都会重启一次,按照官方给出的操作进行了也不好使, 后来就关闭更新,没有再打开 ------------------------------------- ...

  10. 保存最后N个元素

    cookbook系列 问题:对要搜索的值的最后几项做个有限的历史记录. 方案: #coding=utf- from collections import deque def search(lines, ...