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 前的按键判断代码
Mar 19 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
js数组的操作详解
Mar 27 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 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
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js控制frameSet示例
2013/09/10 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
浅谈python对象数据的读写权限
2016/09/12 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python版中国省市经纬度
2020/02/11 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
python生成word合同的实例方法
2021/01/12 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
工作决心书范文
2014/03/11 职场文书
志愿者宣传口号
2014/06/17 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
幼儿园见习报告
2014/10/30 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
疾病证明书
2015/06/19 职场文书
教师节班会主持词
2015/07/06 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang