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 timers计时器简单应用说明
Oct 28 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 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
session 加入redis的实现代码
2016/07/15 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
详解python发送各类邮件的主要方法
2016/12/22 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python subprocess库的使用详解
2018/10/26 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
法制教育演讲稿
2014/09/10 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers