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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
详解Puppeteer 入门教程
May 09 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
react项目从新建到部署的实现示例
Feb 19 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP print类函数使用总结
2010/06/25 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JS实现点击下载的小例子
2013/07/10 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python 判断一个进程是否存在
2009/04/09 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
英语感恩演讲稿
2014/01/14 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
物理研修随笔感言
2014/02/14 职场文书
小学老师寄语大全
2014/04/04 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python