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

你可以用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()上运行的$(window).width()框左侧的内容。我们现在已经计算出左边有多少空间以及我们的盒子有多宽。

最后，我们可以将我们一起制作的内容放在一起，我们可以获得页面宽度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();并减去我们框左侧的内容（第2阶段）和框的宽度（第1阶段），这只会留下我们方框右侧的内容。

这个理论无论如何现在让我们看看一些代码。你会看到我正在研究理论中的所有部分，然后添加一些视觉表现。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

var a = db.ToDos.Where(todo => todo.UserId == id).ToList();

＆＃13;

希望这有意义并帮助您完成项目。

jquery得到div的宽度到左侧窗口

5 个答案: