<!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. 保存进程的pid 文件目录/var/run/

    http://blog.ddup.us/?p=110 http://blog.csdn.net/fyinsonw/article/details/4113124 首先声明这不是愚人节消息,事实上这个消 ...

  2. 关于IdByName 为什么一个消息主题要有 Id和 Name的解释

  3. html学习-js

    1.js介绍 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理.js能使 ...

  4. ASP.NET Zero--1.如何开始

    1.加群 群号:104390185,下载这个文件并解压 用VS2015打开aspnet-zero-1.9.0.1 2.修改配置文件 Web项目web.config连接字符串 <add name= ...

  5. 【LOJ】#2133. 「NOI2015」品酒大会

    题解 想出了一个神奇的技巧 我们先把串反过来(因为我们需要起始位置的值而不是终止位置的值),每个点维护一下 fail树上子树里的点,作为正数绝对值最大的两个数,作为负数绝对值最大的两个数 我们发现这个 ...

  6. java 反射 报错：Attempt to get java.lang.Integer field "..." with illegal data type conversion to int

    类: Integer id; 反射时: Field f = User.class.getDeclaredField("id"); f.setAccessible(true); in ...

  7. Java 基础总结大全

    Java 基础总结大全 一.基础知识 1.JVM.JRE和JDK的区别 JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨平台,jv ...

  8. 基于Redis实现——分布式锁与实现

    实现 使用的是jedis来连接Redis. 实现思想 获取锁的时候,使用setnx加锁,并使用expire命令为锁添加一个超时时间,超过该时间则自动释放锁,锁的value值为一个随机生成的UUID,通 ...

  9. React Native升级方法——升级到最新版本0.59

    React Native最近有大动作,于2019年3月12日发布新版本0.59.主要有两点值得升级:支持React Hooks:升级了JavaScriptCore,使Android性能有大幅提升.据用 ...

  10. Linux中建立软raid

    Linux内核中有一个md(multiple devices)模块在底层管理RAID设备,它会在应用层给我们提供一个应用程序的工具mdadm. mdadm用于构建.管理和监视Linux MD设备(即R ...