<!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. Effective C++笔记（六）：继承与面向对象设计

    参考:http://www.cnblogs.com/ronny/p/3756494.html 条款32:确定你的public继承塑模出is-a关系 “public继承”意味着is-a.适用于base ...

  2. mac pro上安装docker

    1.进入一下地址进行下载docker https://download.docker.com/mac/stable/Docker.dmg 进入后进行下载后进行安装 2.将其拖动到Appliaction ...

  3. Windows下的字体美化

    转自HJK的博客 许多人钟情于Mac很大一部分是因为Mac优雅的字体渲染,Windows原生的效果很难做得到,即便是开启了CleartType效果也不尽如人意.不论是微软本身的审美原因还是历史包袱,与 ...

  4. 关于ZIP自动打包的进一步进化思路

    http://blog.163.com/long200259@126/blog/static/11288755920093120529157/

  5. GO语言Windows下Liteide

    今天用到了. 就学习一下. https://www.golangtc.com/t/56e7caf5b09ecc66b90000fe 在网上看了好多此类介绍,操作太麻烦,自己琢磨出来怎么配置了. 以Li ...

  6. EF 剥坑

    1.简单 count 会生成不必要的嵌套 var xs = (from x in dbContext.db_API_Operationallog where x.id<1 select 1 ). ...

  7. 【ASP.NET】:Ckeditor+Fckeditor的使用

    首先这三个文件:下载ckeditor和ckeditor_aspnet_3.6.4和ckfinder 然后把这三个文件复制到项目根目录下 添加引用CKEditor.NET.dll      CKFind ...

  8. ref:Manual SQL injection discovery tips

    ref:https://gerbenjavado.com/manual-sql-injection-discovery-tips/ Manual SQL injection discovery tip ...

  9. BZOJ1102 [POI2007]GRZ山峰和山谷 [BFS]

    题目传送门 GRZ山峰和山谷 Description FGD小朋友特别喜欢爬山,在爬山的时候他就在研究山峰和山谷.为了能够让他对他的旅程有一个安排,他想知道山峰和山谷的数量.给定一个地图,为FGD想要 ...

  10. java -jar demo.jar

    部署springboot项目 生成jar包其实还是依赖springboot的jar才能跑起来,为什么呢? 1.在C盘手工创建了一个文件夹,是拷贝了demo.jar这个jar包运行是报错的. 2.在D: ...