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 学习笔记 选择器之三
Jul 23 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
vue实现自定义多选按钮
Jul 16 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笔记之常用文件操作
2010/10/12 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
python多进程实现文件下载传输功能
2018/07/28 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
np.dot()函数的用法详解
2020/01/17 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
什么是Smart Navigation?
2016/07/03 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
法务专员岗位职责
2014/01/02 职场文书
教师师德演讲稿
2014/05/06 职场文书
新学期开学演讲稿
2014/05/24 职场文书
务虚会发言材料
2014/12/25 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书