☀【offset() / position()】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">box</div>
<script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>
<script>
/*
* position() 计算相对于偏移父元素—更通俗一点，含有 position: relative; 的元素最近的父元素或祖先元素—的位置。如果未找到这样的父元素或祖先元素，那么会计算相对于文档的位置
* offset() 则总是计算相对于文档的位置
*/
console.log($('#box').offset())
</script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #F00;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<script>
console.log($('#box').offset()) // 希望的样式生效再去获取
</script>
</body>
</html>
☀【offset() / position()】的更多相关文章
- 【client】与【offset】
上面主要区分了[offset]和[client]开头的各个属性的意义,下面这张图是转载的,又加入了[scroll]开头的,和元素本身的[style] clientWidth 是对象看到的宽度(不含 ...
- 【学习笔记】HTML position(static、fixed、relative、absolute)
[本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent"> ...
- 【已解决】pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in position 110: invalid continuation byte
转载自勤奋的小青蛙本文链接地址: [已解决]pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in positi ...
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
- Python基础之【第一篇】
Python简介: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...
- 【地图API】为何您的坐标不准？如何纠偏？
原文:[地图API]为何您的坐标不准?如何纠偏? 摘要:各种坐标体系之间如何转换?到底有哪些坐标体系?什么是火星坐标?为什么我的坐标,在地图上显示会有偏移?本文详细解答以上问题.最后给出坐标拾取工具. ...
- 【集合框架】JDK1.8源码分析之ArrayList详解(一)
[集合框架]JDK1.8源码分析之ArrayList详解(一) 一. 从ArrayList字表面推测 ArrayList类的命名是由Array和List单词组合而成,Array的中文意思是数组,Lis ...
- 【Unity Shader】（九） ------ 高级纹理之渲染纹理及镜子与玻璃效果的实现
笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三) ----- ...
- 【SIKIA计划】_07_Unity3D游戏开发-坦克大战笔记
[新增分类][AudioClips]音频剪辑[AudioMixers]音频混合器[Editor][Fonts]字体[Materials]材质[Models]模型[Standard Assets] [渲 ...
随机推荐
- 链表C++模板实现
#include <iostream.h> #include <stdlib.h> //结点模板类 template <typename t1, typename t2& ...
- jQuery 扩展 【ajax实例】
先前写工具类都是自定义类,直接prototype,jQuery扩展这一块儿,一直也没写过,刚好今天有空,写个试试. 已经有很多人对jQuery,jQuery.fn,jQuery.fn.extend详细 ...
- 64位Win8系统下安装Oracle12c
经过3个小时的折腾,终于在64位win8系统下成功安装了Oracle 12c.这篇文章主要把安装过程中遇到的一些问题总结一下,以便帮助后来人参考. 首先我把我的机器的主要配制情况列举出来: 1. 系统 ...
- Java遍历所有网卡打印对应IP
import java.util.Enumeration; import java.net.*; public class Test { /** * @param args */ public sta ...
- 使用pdb调试python
python pdb调试 python -m pdb myscript.py #注意这会重启myscript.py,这样启动的话,代码每一行都是一个节点 也可以在程序中这么设置断点: import p ...
- 创建一个.bat文件，用于打开某个路径下的文件
- <a>作Form表单提</a>
1. Form表单<%using (Html.BeginForm("AddRoles", "RoleManage", FormMethod.Post, n ...
- mvc3.0中[ValidateInput(false)]失效的问题
在asp.net mvc3.0中[ValidateInput(false)]特性失效了,只需要在网站根目录中的web.config中做如下配置即可: <system.web> <ht ...
- 黄聪：如何使用CodeSmith批量生成代码(转：http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)
先看看CodeSmith的工作原理: 简单的说:CodeSmith首先会去数据库获取数据库的结构,如各个表的名称,表的字段,表间的关系等等,之后再根据用户自定义好的模板文件,用数据库结构中的关键字替代 ...
- 《javascript高级程序设计》对象图
1.原型链图 2.作用域链图 3.继承