<!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. php返回json数据函数实例_php技巧_脚本之家

    本文实例讲述了php返回json数据函数的用法,分享给大家供大家参考.具体方法如下: json_encode()函数用法: echo json_encode(array('a'=>'bbbb', ...

  2. [ python ] 练习作业 - 1

    1,写代码,有如下列表,按照要求实现每一个功能 li = ["alex","wusir","eric","rain",& ...

  3. java基础12 抽象类（及关键字：abstract）

    抽象类:abstract 1.应用的场景 我们描述一类事物时,存在着某种行为,但这种行为目前不具体,那么我们就可以抽取这种行为的声明,但是不去实现这种行为,我们就需要使用抽象类. 2.抽象的好处 强制 ...

  4. 自组织神经网络介绍：自组织特征映射SOM(Self-organizing feature Map)，第三部分

    前面两篇介绍了SOM的基本概念和算法,第一部分,第二部分,本篇具体展开一下应用中的一些trick设定. SOM设计细节 输出层设计 输出层神经元数量设定和训练集样本的类别数相关,但是实际中我们往往不能 ...

  5. jmeter------reponse报错”Unknown column 'XXXXX' in 'where clause'“

    一.问题描述 jmeter添加了与数据库mysql的连接,编写完JDBC Request之后,运行提示报错”Unknown column 'be7f5b6e750bb6becf855386338644 ...

  6. Apache配置实现日志按天分割并删除指定几天前的日志

    Apache日志默认情况下是一周切割一次,由于访问量大的时候日志的文件还是比较大的,同时也不利于管理员对日志的分析处理.于是尝试对Apache日志设置按天分割,并通过计划任务执行删除几天的日志. 配置 ...

  7. 性能测试常用的linux命令

    性能测试常用的linux命令 linux测试nginx64bitredhatlighttpd 查看日志    awk '$4 ~/^\[27\/Nov\/2008:15:2[0-5]/ {print ...

  8. HttpServletRequest继承字ServletRequest的常用方法

    //获取请求的完整路径String origUrl = req.getRequestURL().toString(); //获取查询的参数String queryStr = req.getQueryS ...

  9. Java 继承内部类

    大家有没有想过内部类究竟能不能被继承呢? public class Main { public static void main(String[] args){ Outer outer = new O ...

  10. Mysql 主键约束PrimaryKey

    Mysql 主键约束Primary Key 今天来简单的讲一下主键约束. 假如有一张学生信息表,里面记录了学生的学号 ,姓名,成绩等,那么,会不会有两个学号相同的学生,答案肯定是否定的,如果有的话也只 ...