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

我想得到

div

和窗口/视口左侧之间的宽度、距离或像素。 在窗口右侧的

div

之间再加一个宽度。 我将使用宽度创建一条左线和一条右线。 但我在jQuery方面很差，我尝试了

offset

，但似乎什么都没发生。 所以我再次回到0，所以我没有在这里包括小提琴，因为我里面什么都没有。 但是我附上了下面的图片链接，来解释我的问题。 请帮助我尝试获得宽度，我可以自己创建线。 多谢各位

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

左分区宽度=父分区宽度-子分区偏移

右分区宽度=父分区宽度-子分区偏移量+子分区宽度

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

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

也许这能帮你。

---

毕竟，

.width（）

不是唯一的答案，就像

innerWidth（）

或

outerWidth（）

使用POJ（纯旧javascript）更容易做到这一点。获取元素在屏幕上的位置。然后计算其

left

属性。这就是你左边线条的宽度。然后从屏幕宽度中减去其

right

属性。这就是你右边的线的宽度

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

有关更多信息，请参阅

---

如果需要窗口的宽度而不是屏幕，请将

screen.width

更改为

window.innerWidth

。如果不希望滚动条等包含在宽度中，请使用

document.documentElement.clientWidth

。（有关这些方面的更多信息，请参阅。）

您可以使用JavaScript来实现，无需jQuery：

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

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

---

我们可以计算出框的开头是

.offset（）

。 接下来，我们可以计算出框以

.offset（）+.width（）结尾的位置。
现在我们知道我们的盒子在x轴上的位置

现在让我们看看方框左侧的
.left
可以在
.offset（）上运行。
现在我们已经计算出左边有多少空间，盒子有多宽

最后，我们可以把我们的计算结果放在一起，我们可以得到页面宽度
$（window）.width（）
，然后减去方框左侧的宽度（第2阶段）和方框宽度（第1阶段），这样只剩下方框右侧的宽度

这就是理论，现在让我们看看一些代码。你会看到，我从理论中计算出了所有的部分，然后添加了一些视觉表现


calcSizes=function（）{
var-boxPos=$（“.box”）.offset（），
toLeft=BOX位置左侧，
toRight=$（window.width（）-（$（“.box”）.width（）+toLeft）；
$（“.left”）.width（toLeft+“px”）；
$（“.right”）.width（toRight+“px”）；
console.log（“右：+toRight+px”）；
日志（“左：+toLeft+px”）；
log（“宽度：”+$（“.box”）.Width（）+“px”）；
console.log(
$（窗口）.width（）+“px=”+
toRight+“px+”+
toLeft+“px+”+
$（“.box”）.width（）+“px”
);
控制台日志（“”）；
}
calcSizes（）
正文{
保证金：0
}
.盒子，
.指标{
填充：10px0；
文本对齐：居中
}
.盒子{
宽度：100px；
背景:#FF5722；
剩余利润：60%
}
.指标{
背景：重复线性梯度（45度，#F44336，#F44336 10px，#D32F2F 10px，#D32F2F 20px）；
溢出：隐藏；
转换：translatey（-100%）；
不透明度：.8
}
.左{
浮动：左
}
.对{
浮球：对
}
钮扣{
位置：固定；
顶部：55px；
左：30px；
}

盒子
左边
正确的
重新计算
请向我们展示一些代码，看看您尝试了什么。从该分区的左右两侧获取位置：）到目前为止您尝试了什么？将代码放在一个代码段或中。我已经删除了它，因为jquery代码是错误的，它会影响我的其他函数。在我得到窗户的宽度后，我在停车。尽管如此，我的答案仍然有效。第二行不应该是
var myLeftLineWidth=x.left？如果你不将提琴水平居中，你的提琴就撑不住；无论您将左边距设置为什么，返回的两个值都是相等的。如果您将
offsetRight
更改为=
document.documentElement.cientWidth-offset.right
，它会正常工作。看起来是这样。谢谢。我可能会执行类似window.innerWidth-（offset.left+mydiv.clientWidth）的操作；
var mydiv = document.getElementById('mydiv');
var offset = mydiv.getBoundingClientRect();

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