<!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. WebService初识

    Web service 是一种跨编程语言和跨操作系统平台的远程调用技术,即跨平台远程调用技术.也就是说,不管是J2EE架构,还是.net架构 只要按照规范就可以进行通信,实现数据交互等. 这里说的&q ...

  2. linux CentOS 上安装chrome

    1.wget http://chrome.richardlloyd.org.uk/install_chrome.sh   (用wget下载shell文件)2.chmod u+x install_chr ...

  3. tp总结

    不知不觉学tp也快一个月了,虽然还处于一个仅仅只会使用的阶段,但毕竟算是我详细接触的第一个脚本框架,tp还是让我收获了许多. 废话不多说,先列出几个对于我这种新手来说tp新奇而实用的地方. 1.连贯操 ...

  4. csu 1550(字符串处理思路题)

    1550: Simple String Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 481  Solved: 211[Submit][Status][ ...

  5. covariance matrix 和数据分布情况估计

    how to get data covariance matrix: http://stattrek.com/matrix-algebra/covariance-matrix.aspx meaning ...

  6. Hadoop（四）HDFS的高级API操作

    一 HDFS客户端环境准备 1.1 jar包准备 1)解压hadoop-2.7.6.tar.gz到非中文目录 2)进入share文件夹,查找所有jar包,并把jar包拷贝到_lib文件夹下 3)在全部 ...

  7. 开源IDS系列--snorby 2.6.2 undefined method `run_daily_report' for Event:Class (NoMethodError)

    rails runner "Event.run_daily_report"测试邮件配置undefined method `run_daily_report' for Event:C ...

  8. CentOS 7安装Mysql并设置开机自启动的方法

    CentOS 7不带Mysql数据库了,默认的数据库是MariaDB(Mysql的一个分支). 可以按照以下步骤手动安装Mysql数据库. 1. 下载rpm安装文件 ? 1 wget http://r ...

  9. python沙盒逃逸

    前言 最近遇到了很多python沙盒逃逸的题目(不知道是不是因为现在python搭的站多了--),实际使用时发现只会复制别人的payload是不够用的,于是自己来总结一波(顺带一提python沙盒逃逸 ...

  10. linux网络管理----Linux网络配置

    1.1 linux配置IP地址 1️⃣ ifconfig命令临时配置IP地址 能不能自动获取IP地址和DNS地址,要看有没有DHCP服务器 win10上,输入ipconfig /all 会看到是否有D ...