jQuery / JavaScript如何找到元素的左边内部边缘？ [英] jQuery / JavaScript How can I find the left inner edge of an element

问题描述

现在我正在脑子里想着一个想法，一直在寻找答案来解决我的一个特定问题，因为我以前也无法做到这一点。

我想要做的是拿2+元素。一个主包装元素和该包装中的一个或多个元素。我想要做的是当包装中的元素的右边缘与包装左边的内边缘相交时，我想打开一个函数。所以我可以根据我的整体想法做几件事情。然而，找到这些边缘或者真正的任何边缘对我来说一直是个问题。我相信它是可能的，但问题是怎么回事。

您的答案是使用位置（）.left 来获取元素在父元素中的正确位置。

  var boxPosX = $（'＃box'）。position（）。left; 
  

jsBin demo

  function custom ）{
 $（'＃wrapper'）。css（{background：'yellow'}）。text（'TOUCHDOWN！'）; 
 
 $ b $（window）.resize（function（）{
 var wrapperW = $（'＃wrapper'）。outerWidth（true）; 
 var boxW = $（'＃box'）。width（）; 
 
 var boxPosX = $（'＃box'）。position（）。left; 
 
 var touched = wrapperW - （boxW + boxPosX）; 
 
 if（touch <= 0）{
 custom（）; 
} 
}）; 
  

Right now I am toying around with an idea in my head, and have been looking for answers how to tackle a particular question of mine, as I haven't been able to do it in the past either.

What I want to do is take 2+ elements. One main wrapper element and 1 or more elements within that wrapper. What I want to do is when the right outer edge of the elements within the wrapper meets the wrappers left inner edge I want to fire off a function. So I can do a couple things based on the overall idea I have. However finding those edges or really any edges in general have always been a problem for me. I'm sure its possible, but how is the question.

解决方案

You answer is to use position().left to get the correct position of an element within a parent element.

var boxPosX = $('#box').position().left;

jsBin demo

function custom(){
  $('#wrapper').css({background:'yellow'}).text('TOUCHDOWN!'); 
}

$(window).resize(function(){     
  var wrapperW = $('#wrapper').outerWidth(true);
  var boxW = $('#box').width();

  var boxPosX = $('#box').position().left;

  var touched = wrapperW - (boxW+boxPosX);

  if( touched <= 0 ){
     custom() ;
  }      
});

这篇关于jQuery / JavaScript如何找到元素的左边内部边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！