jquery控制css绝对定位位置效果

$(获取到需要d出浮动框的元素obj)hover(function(){

//鼠标移动时

//获取到需要d出浮动框的元素obj

divobj=documentgetElementById(obj);

//获取obj的位置，left及top，IE及FF30以上都支持

divobjleft = divobjgetBoundingClientRect()left;

divobjtop = divobjgetBoundingClientRect()top;

//为d出的div的left，top赋值

divobjx= divobjleft + 0 / d出的div距离obj左边的距离，取实际值 / ;

divobjy= divobjtop + 50 / d出的div距离obj顶部的距离，取实际值 / ;

// 定义d出div

var x="<div id='description' class='help' style='left:"+divobjx+"px; top:"+divobjy+"px;'>这里是内容，也可以通过参数来传递</div>";

//通过insertAdjacentHTML来写入到html内（这个参数火狐不支持，但是可能通过兼容代码 让火狐兼容insertAdjacentHTML 属性，兼容代码不长，就几十行）

documentbodyinsertAdjacentHTML("afterBegin",x);

},function(){

//鼠标移出时，通过closeDiv()移除这个div

closeDiv("description");

})

/ Sart 移除元素方法 /

function closeDiv(obj){

var divobj= documentgetElementById(obj);

divobjparentNoderemoveChild(divobj);

}

/ End移除元素方法 /

/ Start 兼容代码 让火狐兼容insertAdjacentHTML 属性 /

if (typeof HTMLElement != "undefined" && !HTMLElementprototypeinsertAdjacentElement) {

HTMLElementprototypeinsertAdjacentElement = function (where, parsedNode) {

switch (where) {

case "beforeBegin":

thisparentNodeinsertBefore(parsedNode, this);

break;

case "afterBegin":

thisinsertBefore(parsedNode, thisfirstChild);

break;

case "beforeEnd":

thisappendChild(parsedNode);

break;

case "afterEnd":

if (thisnextSibling) {

thisparentNodeinsertBefore(parsedNode, thisnextSibling);

} else {

thisparentNodeappendChild(parsedNode);

}

break;

}

};

HTMLElementprototypeinsertAdjacentHTML = function (where, htmlStr) {

var r = thisownerDocumentcreateRange();

rsetStartBefore(this);

var parsedHTML = rcreateContextualFragment(htmlStr);

thisinsertAdjacentElement(where, parsedHTML);

};

HTMLElementprototypeinsertAdjacentText = function (where, txtStr) {

var parsedText = documentcreateTextNode(txtStr);

thisinsertAdjacentElement(where, parsedText);

};

}

/ End 兼容代码 让火狐兼容insertAdjacentHTML 属性 /

最近做项目，由于zepto使用的功能较少，想将zepto的功能用较少原生实现，其中有个实现zepto的offset()方法取到各种值的难为了我，我百度了下，大体网上千篇一律的这样写到

我本着试试看的态度将这个方法炒了上去，打印出值结果与我需要的值相差甚远，为此我仔细翻了下源码，源码见下面链接

源码

找到如下方法getBoundingClientRect，翻了下caniuse发现兼容性还好（本人移动端），故可以写成以下方式

如果要考虑兼容性，请仔细看zepto源码

另外上述

改成

也可以实现

获取canvas的宽高

相信使用canvas制作2d图画的程序员都遇到过这么一个场景，定义好一块区域，然后在这个区域内绘制图画，那么所绘制的图画充满这个区域，但是因为某些原因，我们要改变canvas的大小，同时改变外部包裹容器的大小。那么我们怎么获取宽高呢？

不同于普通DOM节点，我们可以使用documentgetElementById('')stylewidth;或者documentgetElementById('')offserWidth;获取。

在canvas中，使用这两种方法均不可

首先我们要获取到canvas,在此还是使用的原生的js,

var canvas = documentgetElementById('canvas');

接下来，使用getBoundingClientRect( )，绘制矩形对象。将canvas所占的区域绘制为矩形。这个方法返回的是一个对象，包含元素各边与页面上边与左边 的距离及构成元素的宽高。ie有些许数字差，2px

这样就可以获取到canvas的宽高了。

代码如下

var myCanvas = documentgetElementById(’ ‘);

var myCanvas_rect = myCanvasgetBoundingClientRect();

var widths = myCanvas_rectwidth;

var heights = myCanvas_rectheight;

以上就是关于jquery控制css绝对定位位置效果全部的内容，包括:jquery控制css绝对定位位置效果、js实现jquery的offset()方法(获取当前元素相对于文档的偏移量 )、怎么获取 canvas rect矩形的宽高等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！