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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
Vue之Watcher源码解析(1)
Jul 19 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
vue.js中ref及$refs的使用方法解析
Oct 08 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
Terran历史背景
2020/03/14 星际争霸
PHP邮件专题
2006/10/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
javascript新手语法小结
2008/06/15 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
初识Node.js
2015/03/20 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python加速程序运行的方法
2020/07/29 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
《要下雨了》教学反思
2014/02/17 职场文书
房屋出售协议书
2014/04/10 职场文书
六一儿童节标语
2014/10/08 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
党员自评材料范文
2014/12/17 职场文书
合同审查法律意见书
2015/06/04 职场文书
入队仪式主持词
2015/07/04 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python