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 选择和过滤方法代码总结
Nov 19 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
jQuery事件用法详解
Oct 06 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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类中private属性继承问题分析
2012/11/01 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
js opener的使用详解
2014/01/11 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript模拟命名空间
2015/04/17 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python 自动提交和抓取网页
2009/07/13 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL