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 相关文章推荐
jquery 扑捉回车键事件代码
Apr 24 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
jquery validate demo 基础
Oct 29 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
如何使JavaScript休眠或等待
Apr 27 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
学python安装的软件总结
2019/10/12 Python
解决Django no such table: django_session的问题
2020/04/07 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
初中同学聚会感言
2014/02/11 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
公司财务管理制度
2015/08/04 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python