☀【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] [渲 ...
随机推荐
- android开发 单击按钮 实现页面间的跳转
我的MainActivity.java部分代码 public class MainActivity extends ActionBarActivity { //不要定义button类型,会出错 Vie ...
- Hdu 1042 N! (高精度数)
Problem Description Givenan integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input OneN in one ...
- OpenJudge 2747 数字方格
1.链接地址: http://bailian.openjudge.cn/practice/2747 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 如上图,有3个 方格,每个 ...
- linux下screen工具的简单使用
有时候,希望即使退出终端了,下次登录linux的时候,还能回到程序的控制界面,这个时候,screen工具就很有用了例如,写了一个从控制台读取屏幕输入的程序input_test,如果从终端退出了,下次登 ...
- Web前端新人笔记之height、min-height的区别
浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素 ...
- Java中的Inner Class (一)
Inner Class看起来是一个简单的Code-Hideing机制,但是Java的Inner Class和C++的有所不同 - Inner Class能够和外部类(Surrounding Class ...
- 【PHP ThinkPHP框架】小bug汇总[更新]
目录结构 1.函数调用 2.绑定select下拉框数据 3.PHP查询功能 4.格式化时间和价钱 5.IF标签比较两个变量 6.eq标签比较两个变量 7.新增信息或者修改信息的自动验证和自动填充 8. ...
- [JQuery]选择器详解
示例 说明 $(this) 当前元素 $("p") 所有<p>元素 $("input") 所有input元素 $(".intro&qu ...
- Python 基础篇：字符串、列表操作
字符串操作 判断是否为数字 string = "200" string.isdigit() >>false 待完善.. 列表操作 列表是我们最以后最常用的数据类型之一, ...
- entity framework extended library , bulk execute,deleting and updating ,opensource
http://weblogs.asp.net/pwelter34/entity-framework-batch-update-and-future-queries