jquery获取div到左侧窗口的宽度

Question

我想获得div 和窗口/视口左侧之间的宽度、距离或像素。 在窗口右侧的div 之间再次出现另一个宽度。 我将使用宽度来创建左线和右线。 但是我的 jQuery 很差，我尝试了offset，但似乎什么也没发生。 所以我又回到了 0，所以我没有在这里包括小提琴，因为我什么都没有。 但我附上了如下图片链接，以解释我的问题。 请帮助我尝试获得宽度，我可以自己创建线条。 谢谢。

Answer 1

var of = $(ele).offset(), // this will return the left and top
    left = of.left, // this will return left 
    right = $(window).width() - left - $(ele).width() // you can get right by calculate

也许这可以帮助你。 毕竟.width() 不是唯一的答案，比如innerWidth() 或outerWidth()

Answer 2

有两种选择 一种是您可以使用红线作为图像，并且可以将 div 放在红线上。 第二个， 如果要计算：

左 div 宽度 = 父 div 宽度 - 子 div 偏移量；

右 div 宽度 = 父 div 宽度 - 子 div 偏移量 + 子 div 宽度；

var parentdiv = document.getElementById("ParentDivID");
var parentWidth = parentdiv.offsetWidth;

var childdiv = document.getElementById("childDivID");
var childWidth = childdiv.offsetLeft;

Answer 3

使用 POJ（普通的旧 javascript）更容易做到这一点。获取元素在屏幕上的位置。然后评估其left 属性。那将是您左行的宽度。然后从屏幕宽度中减去它的right 属性。这将是你右边线的宽度。

var x = document.getElementById('myDiv').getBoundingClientRect();
var myLeftLineWidth = x.left;
var myRightLineWidth = screen.width - x.right; 

欲了解更多信息，请参阅this post。

如果您想要窗口的宽度而不是屏幕的宽度，请将screen.width 更改为window.innerWidth。如果您不希望滚动条等包含在宽度中，请使用document.documentElement.clientWidth。 （有关这些的更多信息，请参阅this。）

Answer 4

我们可以计算出方框以.offset() 开头的位置。 接下来，我们可以找出以.offset() + .width() 结尾的框的位置。 我们现在知道我们的盒子在 x 轴上的位置。

现在让我们看看我们在.left 框左侧有什么可以在我们的.offset() 上运行。 我们现在已经计算出左边有多少空间以及我们的盒子有多大。

最后，我们可以把我们计算出来的东西放在一起，我们可以得到页面宽度$(window).width() 减去我们的盒子左边的宽度（阶段 2）和我们的盒子的宽度（阶段 1）那只会留下我们盒子右边的东西。

不管怎样，这就是理论，现在让我们看看一些代码。你会看到我正在研究理论中的所有部分，然后添加一些视觉表示。

calcSizes = function() {
  var boxPos  = $(".box").offset(),
      toLeft  = boxPos.left,
      toRight = $(window).width() - ($(".box").width() + toLeft);

  $(".left").width(toLeft + "px");
  $(".right").width(toRight + "px");

  console.log("Right: " + toRight + "px");
  console.log("Left: "  + toLeft + "px");
  console.log("Width: " + $(".box").width() + "px");
  console.log(
    $(window).width() + "px = " +
    toRight           + "px + " +
    toLeft            + "px + " +
    $(".box").width() + "px"
  );
  console.log(" ");
}

calcSizes();

body {
  margin: 0
}
.box,
.indicator {
  padding: 10px 0;
  text-align: center
}
.box {
  width: 100px;
  background: #FF5722;
  margin-left: 60%
}
.indicator {
  background: repeating-linear-gradient( 45deg, #F44336, #F44336 10px, #D32F2F 10px, #D32F2F 20px);
  overflow: hidden;
  transform: translatey(-100%);
  opacity: .8
}
.left {
  float: left
}
.right {
  float: right
}
button {
  position: fixed;
  top: 55px;
  left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">BOX</div>
<div class="left indicator">
  LEFT
</div>
<div class="right indicator">
  RIGHT
</div>

<button onclick="calcSizes()">
  Recalculate
</button>

希望这是有道理的，可以帮助您完成项目。

Answer 5

你可以用 JavaScript 做到这一点，不需要 jQuery：

var mydiv = document.getElementById('mydiv');
var offset = mydiv.getBoundingClientRect();

var offsetRight = document.documentElement.clientWidth - offset.right;
var offsetLeft = offset.left;

JSFiddle