<!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. cgic实现输入文件名，打开文件的功能

    a.c文件 #include <stdio.h>#include <stdlib.h>#include <string.h>#include <stdarg. ...

  2. Java容器概述

    如果一个程序只包含固定数量的且其生命期都是己知的对象． 那么这是一个非常简单的程序. 通常,程序总是根据运行时才知道的某些条件去创建新对象.在此之前,不会知道所需对象的数量,甚至不知道确切的类型.为解 ...

  3. 720P、1080P、4K是什么意思?

    什么是像素? 中文全称为图像元素.像素仅仅只是分辨率的尺寸单位,而不是画质. 从定义上来看,像素是指基本原色素及其灰度的基本编码. 像素是构成数码影像的基本单元,通常以像素每英寸PPI(pixels ...

  4. hdu 1850(尼姆博弈)

    Being a Good Boy in Spring Festival Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...

  5. Python 一些 实用的包（持续更新）

    line_profiler:(代码性能分析) 使用方法:链接 codecs:(Python内置的编码库) 数据分析与挖掘领域: 引自博客:这里     因为他有很多这个领域相关的库可以用,而且很好用, ...

  6. Adminimize 插件：WordPress根据用户角色显示/隐藏某些后台功能

    倡萌刚才分享了 WordPress根据用户角色隐藏文章/页面的功能模块(Meta Boxes),如果你还想根据不同用户角色显示或隐藏后台的某些功能,比如 顶部工具条.左边导航菜单.小工具.仪表盘.菜单 ...

  7. php正则匹配以“abc”开头且不能以“xyz”结尾的字符串

    本文介绍下,用php正则区配以"abc"开头的,且不能以"xyz"结尾的字符串的方法,有需要的朋友参考下. 要求:用php正则表达式匹配以“abc”开头,但结尾 ...

  8. sicily 1154. Easy sort (tree sort& merge sort)

    Description You know sorting is very important. And this easy problem is: Given you an array with N ...

  9. numpy 练习

    numpy学习,为后续机器学习铺垫 参考网址 #!/usr/bin/python #coding=utf-8 #__author__='dahu' # from numpy import * impo ...

  10. 开源IDS系列--snorby 进程正常，但是worker无法启动 The Snorby worker is not currently running

    设置页面报错:   The Snorby worker is not currently running. It's imperative you start the worker immediate ...