Javascript 计算样式不'；t返回元素的计算宽度

为了使时间线与水平条目的列表具有相同的宽度，我认为可以将有序列表设置为

max content

，然后将列表的计算宽度设置为行。但是，分配给

computedTimelineStyle.width

的值为零

对于我想要实现的目标，是否有解决办法

document.addEventListener("DOMContentLoaded", () => {
  let yearKeys = Object.keys(timeEntries);
  let timeline = document.getElementsByClassName("timeline")[0];
  let timelineLine = document.getElementsByClassName("timeline_line")[0];
  let computedTimelineStyle = window.getComputedStyle(timeline);
  console.log(computedTimelineStyle.width);
  timelineLine.style.width = computedTimelineStyle.width;

  for (const yearKey in yearKeys) {
    if (yearKeys.hasOwnProperty(yearKey)) {
      const year = yearKeys[yearKey];
      let yearElement = document.createElement("li");
      yearElement.innerHTML = year;
      timeline.appendChild(yearElement);
    }
  }
});

日志：

let focused={年：假，月：假}；
让月份={
1: {
标题：“一月”，
天数：31
},
2: {
标题：“二月”，
天数：28
},
3: {
标题：“三月”，
天数：31
},
4: {
标题：“四月”，
天数：30
},
5: {
标题：“五月”，
天数：31
},
6: {
标题：“六月”，
天数：30
},
7: {
标题：“七月”，
天数：31
},
8: {
标题：“八月”，
天数：31
},
9: {
标题：“9月”，
天数：30
},
10: {
标题：“十月”，
天数：31
},
11: {
标题：“11月”，
天数：30
},
12: {
标题：“12月”，
天数：31
}
};
让timeEntries={
2019: {
// 1: {
//   2: {
//标题：“测试标题”，
//描述：
//       "Lorem ipsum dolor sit amet，Concetetur adipiscing Elite.Quisque at ligula varius，mattis urna sed，auctor tellus.Aliquam fringilla Gradida imperdiet.Aliquam elementum vulputate quam.Pellentesque Imperty neque sit amet tellus finibus Temporal.Quisque nunc est，viverra vel maximus non，fringilla in nulla.Morbi前庭turpis et luctus，在《天妇之灵》中。在《利奥·卢克图斯·菲尼布斯》中的《尼西》中使用。多尼克·马蒂斯·埃利芬德·奥克托。”
//   }
// }
},
2018: {},
2017: {},
2016: {},
2015: {},
2014: {},
2013: {},
2012: {},
2011: {},
2010: {},
2009: {},
2008: {},
2007: {},
2006: {},
2005: {},
2004: {},
2003: {},
2002: {},
2001: {},
2000: {},
1999: {},
1998: {},
1997: {},
};
document.addEventListener（“DOMContentLoaded”，（）=>{
让yearKeys=Object.keys（timeEntries）；
让timeline=document.getElementsByClassName（“timeline”）[0]；
让timeline=document.getElementsByClassName（“timeline_line”）[0]；
让computedTimelineStyle=window.getComputedStyle（时间线）；
log（computedTimelineStyle.width）；
TimeLine.style.width=计算的TimeLineStyle.width；
for（年密钥中的const yearKey）{
if（yearKey.hasOwnProperty（yearKey））{
const year=yearKey[yearKey]；
让yearElement=document.createElement（“li”）；
yearElement.innerHTML=年；
时间线。附加子项（年元素）；
}
}
})；

@导入url（“https://fonts.googleapis.com/css?family=Montserrat:500&display=swap");
.时间线盒{
宽度：1000px；
身高：50%；
背景：浅灰色；
保证金：自动；
利润率最高：10%；
显示：网格；
证明内容：中心；
对齐内容：居中对齐；
位置：相对；}
.时间线包装器{
宽度：最大含量；
溢出：隐藏；
高度：200px；}
.时间线{
z指数：1；
宽度：继承；
高度：20px；
边缘顶部：90像素；
边缘底部：90像素；
背景：线性梯度（到底部，rgba（255，255，255，0）0%，rgba（255，255，255，0）41%，fd2600 60%，rgba（255，255，255，0）55%，rgba（255，255，255，0）100%）；）
.时间表{
z指数：2；
列表样式：无；
宽度：最大含量；
边缘顶部：80px；
页边距底部：80px；}
.timeline>li{
浮动：左；
背景：浅灰色；
左侧填充：7px；
右侧填充：7px；
左边距：266px；
字号：2rem；
边界半径：5px；}
.timeline>li:n个孩子（1）{
左边距：0；}
钮扣{
宽度：100px；
高度：30px；
颜色：黑色；
边距：自动；}
html，
身体，
元素，
* {
保证金：0；
填充：0；
边界：0；
字体系列：“蒙特塞拉特”，无衬线；}

---

有时您必须给浏览器留出一些时间来计算所有内容。请尝试在加载DOMContentLoaded后将拾取代码超时几毫秒，以检查它是否适合您

---

如果不起作用，请尝试使用dom object offsetWidth属性（）。它应以px为单位返回宽度。

您的元素已加载到页面，但需要在添加元素后检查时间线的计算宽度

因此，您只需要在for循环之后添加

let computedTimelineStyle=window.getComputedStyle（timeline）；

let timeEntries={
2019: {
},
2018: {},
2017222: {},
2016: {},
2015: {},
2014: {},
2013: {},
2012: {},
2011: {},
2010: {},
2009: {},
2008: {},
2007: {},
2006: {},
2005: {},
2004: {},
2003: {},
2002: {},
2001: {},
2000222224444: {},
1999: {},
1998: {},
1997: {},
};
const timeline=document.getElementsByClassName（“timeline”）[0]；
const yearKeys=Object.keys（时间项）；
for（年密钥中的const yearKey）{
const year=yearKey[yearKey]；
const yearElement=document.createElement（“li”）；
yearElement.innerHTML=年；
时间线。附加子项（年元素）；
}
让computedTimelineStyle=window.getComputedStyle（时间线）；
console.log（computedTimelineStyle.width）；

。首先{
宽度：最大含量；
背景：红色；
保证金：0；
填充：0；
}

时间线是什么类型的元素？在浏览器中检查时，它的宽度是多少？@ThomasPreston 7898.5px，但是，随着我添加更多条目，这个数字会发生变化。时间线是为了适应JSON对象中的条目数。添加元素后，您需要重新调整宽度。因为您现在已经这样做了吗？您只需要添加初始宽度，即0，并且不再更改。我假设“timeline”是一个。在调用此代码时，是否已填充

元素？我想知道这是否与在DOMContentLoaded上执行此操作的时间有关。@MihaiT是的，我知道我需要这样做

0px main.js:93:11