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的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 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
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
实例讲解React 组件
2020/07/07 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python xml解析实例详解
2016/11/14 Python
Python中元组,列表,字典的区别
2017/05/21 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python模块搜索路径代码详解
2018/01/29 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python多进程使用函数封装实例
2020/05/02 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
市场部专员岗位职责
2013/11/30 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
一年级数学教学反思
2014/02/01 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
优秀团员事迹材料
2014/12/25 职场文书
排球赛新闻稿
2015/07/17 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
css样式important规则的正确使用方式
2022/06/10 HTML / CSS