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 相关文章推荐
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
关于vue-router的那些事儿
May 23 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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 日漫
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php实现读取内存顺序号
2015/03/29 PHP
php pdo操作数据库示例
2017/03/10 PHP
常用简易JavaScript函数
2009/04/09 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python生成随机图形验证码详解
2017/11/08 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
浅谈Python中的模块
2020/06/10 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
为什么需要版本控制
2016/10/28 面试题
机械绘图员岗位职责
2013/11/19 职场文书
租房安全协议书
2014/08/20 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript