jquery 设置元素相对于另一个元素的top值(实例代码)

<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";

如图所示：

赞 (0)

相关推荐

  • jquery 设置元素相对于另一个元素的top值(实例代码)

    jquery 设置元素相对于另一个元素的top值(实例代码)

    <div id="span1">sfdsfsddfsdf</div><span id="span2" style="position:relative"> <input id="input" type="text"></input>        <input id="button" type="button&q

  • jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)

    上个月研究学习了<js判断一个元素是否为另一个元素的子元素>,感觉还挺好用,但是在jQuery应用中还是有很多缺陷,比如多个元素的时候写起来就不是很方便.所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展: 复制代码 代码如下: //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; //判断:当前元素是否是被筛

  • js判断一个元素是否为另一个元素的子元素的代码

    当然方法有很多,不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一. 废话少说直接上方法: 复制代码 代码如下: function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){ if (obj == parentObj){ return true; } obj = obj.parentN

  • jQuery获取table下某一行某一列的值实现代码

    jQuery获取table下某一行某一列的值实现代码 最近需要获取到某个table下每一行某一列的值,用jQuery做了一会儿,过程如下,仅供参考: <div class="div"> <table name="info"><tr><td>lily<span>okok</span></td></tr><tr><td>18</td><

  • php+jquery+html实现点击不刷新加载更多的实例代码

    基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参

  • jquery实现表格中点击相应行变色功能效果【实例代码】

    jquery实现表格中点击相应行变色功能效果【实例代码】

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

  • jQuery 实现鼠标画框并对框内数据选中的实例代码

    jQuery 实现鼠标画框并对框内数据选中的实例代码

    jquery库: jquery -1.10.2.min.js,jQuery UI - v1.12.1. jQuery 代码 不多说了,之间上代码.不懂的地方看注释. <script type="text/javascript"> //鼠标按下时的X Y坐标 var mouseDownX; var mouseDownY; //鼠标按下时移动的X Y 坐标 var mouseMoveX; var mouseMoveY; //移动的状态 var isMove = false; /

  • 使用do...while的方法输入一个月中所有的周日(实例代码)

    使用do...while的方法输入一个月中所有的周日(实例代码) do{ var date = Number(prompt('请输入一个月的总天数')); var start = (prompt('请输入一个月的一号是周几')); for(var i=0;i<date;i++){ if((start+1)%7===0){ console.log(i+'号是周日') } } console.log('查询完毕'); }while('yes'===prompt('您还继续查询休息日吗?','yes继

  • jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之. 然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html): <!DOCTYPE html> <html xmlns="htt

  • 动态的创建一个元素createElement及删除一个元素

    动态的创建一个元素createElement及删除一个元素

    复制代码 代码如下: <html> <script language = "javascript" type = "text/javascript"> function test(){ //创建元素 var myElement = document.createElement("a");//a是想创建的html元素标签名 //给创建的元素添加必要的信息 myElement.href = "http://www.b

随机推荐