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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS前端加密算法示例
2016/12/22 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
NumPy统计函数的实现方法
2020/01/21 Python
浅析python标准库中的glob
2020/03/13 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python如何将模块打包并发布
2020/08/30 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
英文简历自荐信范文
2013/12/11 职场文书
平安建设工作方案
2014/06/02 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
安全教育片观后感
2015/06/17 职场文书