firefox中boundingWidth以及boundingHeight的获取

来源：互联网发布：带雨带知的俗语编辑：程序博客网时间：2024/05/22 17:40

这几天在做兼容，所以遇到的怪问题比较多，记录一下。

boundingWidth以及boundingHeight是结合createTextRange来进行使用的。

例如:

在这里我们希望得到Input里面value的宽度和高度。在IE里面就可以使用boundingWidth以及boundingHeight直接得到。

但是这两个方法只有IE支持，在firefox中我们可以采用下面这种折中的办法来进行解决。

var inputId = elem.attributes["id"].nodeValue;//input的idvar parentDiv = $('<div></div>');//创建divparentDiv.attr('id','parentId');//设置idparentDiv.appendTo('body');//将div加入页面parentDiv.css("display","inline-block").hide();var a = $("#"+inputId).val();$("#parentId").html(a);//将输入框的内容加入divvar r,x,y,l,t,w,h;if(navigator.userAgent.indexOf("MSIE")<=0){x = event.layerX;//鼠标当前坐标//y = event.layerY;//l = $("#"+inputId).offset().left;//t = $("#"+inputId).offset().top;w = $("#parentId").width();//h = $("#parentId").height();//w = $("#"+id)[0].offsetWidth;//h =$("#"+id)[0].offsetHeight;//w = $("#"+id).width();//input的宽度//h = $("#"+id).height();//input的高度if(x>w){return false;}else{return true;}}else{r = elem.createTextRange();x = event.offsetX;//鼠标当前坐标y = event.offsetY;l = r.offsetLeft;t = r.offsetTop;w = r.boundingWidth;h = r.boundingHeight;}var c =x >= l && x < l + w && y >= t && y < t + h;return  c;

我们可以先获取到input的value，然后定义一个div,将value放入其中，然后得到div的宽度和高度，经过检测，支持firefox和google。

如果你有更好的办法，请分享一下，非常感谢！

0 0