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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
JS实现前端动态分页码代码实例
Jun 02 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类
2006/07/15 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
编程语言Python的发展史
2014/09/26 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Django实现基于类的分页功能
2019/10/31 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
反邪教标语
2014/06/23 职场文书
检讨书范文
2015/01/27 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
个人承诺书格式范文
2015/04/29 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android
python 镜像环境搭建总结
2022/09/23 Python