jquery 设置元素相对于另一个元素的top值(实例代码)


Posted in Javascript onNovember 06, 2013

<div id="span1">sfdsfsddfsdf</div>
<span id="span2" style="position:relative">

        <input id="input" type="text"></input>
        <input id="button" type="button"></input>

 </span>

设置button在input的下方

$("#button").css("{top":$("#input").offset().top-$("#span2").offset().top+$("#input").height,position:"absolute"});

这样舆论input在哪个位置button都在input的下边,同样可以运用到日历小插件在input文本框的下方

1、在jquery中offset().top是相对于body来说的,另外在设置top值的时候要找到与该元素最近的有相对值的元素

在js中可以这样写:

//取得HTML控件绝对位置
Calendar.prototype.getAbsPoint = function (e){
  var x = e.offsetLeft;
  var y = e.offsetTop;
  while(e = e.offsetParent){
    x += e.offsetLeft;
    y += e.offsetTop;
  }
  return {"x": x, "y": y};
}
 var xy = this.getAbsPoint(popControl);
   this.panel.style.left = xy.x  + "px";
  this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px";

如图所示:

jquery 设置元素相对于另一个元素的top值(实例代码)

Javascript 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
js tab 选项卡
Apr 26 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
Vue程序调试的方法
Jun 17 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 #Javascript
可选择和输入的下拉列表框示例
Nov 05 #Javascript
js函数返回多个返回值的示例代码
Nov 05 #Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 #Javascript
查看大图功能代码jquery版
Nov 05 #Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 #Javascript
iframe子页面获取父页面元素的方法
Nov 05 #Javascript
You might like
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
python随机取list中的元素方法
2018/04/08 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
详解python logging日志传输
2020/07/01 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
机关领导干部作风整顿整改措施
2014/09/19 职场文书
python playwrigh框架入门安装使用
2022/07/23 Python