jquery 获取左侧 div 的宽度 window

Question

我想获取 div 和 window/viewport 左侧之间的宽度或距离或像素。 div 和 window 右侧之间的另一个宽度。我将使用宽度来创建左线和右线。但是我在 jQuery 方面很差，我尝试 offset 但似乎没有任何反应。所以我再次回到 0，所以我没有在此处包含 fiddle，因为我里面什么也没有。但是我附上了下面的图片 link 来解释我的问题。请帮助我尝试获得宽度，我可以自己创建线条。谢谢。

Answer 1

有两种选择一种是您可以使用红线作为图像，您可以将 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 2

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 3

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

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

有关详细信息，请参阅 this post。

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

Answer 4

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

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

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

JSFiddle

Answer 5

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

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

最后，我们可以把我们计算出来的东西放在一起，我们可以得到页面宽度 $(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>

希望这是有道理的，并能帮助你完成你的项目。

jquery 获取左侧 div 的宽度 window

jquery get width of div to left side window

html

javascript

css

jquery

offset