<!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. 使用ExtJS做一个用户的增删改查

    extjs版本为4.2,用户数据放在静态list中存储 User.java package com.ext.demo.dao; public class User { private int id; ...

  2. EL（表达式）语言的几种运算符

    1.EL的基本语法 (1)EL表达式语法:以${开头,以}结束,中间为合法的表达式,具体语法格式如下: ${expression} (2)参数说明:Expression:指定要输出的内容,可以是字符串 ...

  3. 【严蔚敏】【数据结构题集（C语言版）】1.17 求k阶斐波那契序列的第m项值的函数算法

    已知k阶斐波那契序列的定义为 f(0)=0,f(1)=0,...f(k-2)=0,f(k-1)=1; f(n)=f(n-1)+f(n-2)+...+f(n-k),n=k,k+1,... 试编写求k阶斐 ...

  4. 报错org.springframework.dao.InvalidDataAccessResourceUsageException: could not extract ResultSet; SQL [n/a]; nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet"

    org.springframework.dao.InvalidDataAccessResourceUsageException: could not extract ResultSet; SQL [n ...

  5. JAVA编程思想读书笔记（五）--多线程

    接上篇JAVA编程思想读书笔记(四)--对象的克隆 No1: daemon Thread(守护线程) 参考http://blog.csdn.net/pony_maggie/article/detail ...

  6. 洛谷P2243 电路维修 [最短路]

    题目传送门 电路维修 题目背景 Elf 是来自Gliese 星球的少女,由于偶然的原因漂流到了地球上.在她无依无靠的时候,善良的运输队员Mark 和James 收留了她.Elf 很感谢Mark和Jam ...

  7. python log的处理方式

    python log的处理方式 配置文件 #! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "Q1mi" ...

  8. 简单模仿拉钩网上的“hot_info”

    目录 前言 技术 判断进入div的方向 动画 绑定事件 css html 还需改进的地方 前言 突然想起来之前看到拉钩网上的hot_info(不知道该叫什么,但是拉钩网上这个div的class是hot ...

  9. BASE64Decoder BASE64Encoder jar包问题

    操作 对项目右击--->build path--->configure build path---> 选中默认jre OK,操作完毕, import sun.misc.BASE64D ...

  10. HDU 6052 To my boyfriend（概率 贡献）

    To my boyfriend Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...