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控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
JS实现时间校验的代码
May 25 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
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python基础之文件读取的讲解
2019/02/16 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
《乡愁》教学反思
2014/02/18 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
普通党员对照检查材料
2014/09/24 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Python爬虫之爬取二手房信息
2021/04/27 Python
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python