Computed style doesn't return computed width of an element

Question

In order to have the timeline line the same width as the list of horizontal entries, I thought I could set the ordered list to max-content, then set the computed width of the list to the line. However the value assigned to computedTimelineStyle.width is zero.

Is there a workaround for what I want to achieve?

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

Log:

0px main.js:93:11

let focussed = { year: false, month: false };

let months = {
  1: {
    title: "January",
    days: 31
  },
  2: {
    title: "Febuary",
    days: 28
  },
  3: {
    title: "March",
    days: 31
  },
  4: {
    title: "April",
    days: 30
  },
  5: {
    title: "May",
    days: 31
  },
  6: {
    title: "June",
    days: 30
  },
  7: {
    title: "July",
    days: 31
  },
  8: {
    title: "August",
    days: 31
  },
  9: {
    title: "September",
    days: 30
  },
  10: {
    title: "October",
    days: 31
  },
  11: {
    title: "November",
    days: 30
  },
  12: {
    title: "December",
    days: 31
  }
};

let timeEntries = {
  2019: {
    // 1: {
    //   2: {
    //     title: "Test Title",
    //     desc:
    //       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula varius, mattis urna sed, auctor tellus. Aliquam fringilla gravida imperdiet. Aliquam elementum vulputate quam. Pellentesque imperdiet neque sit amet tellus finibus tempor. Quisque nunc est, viverra vel maximus non, fringilla in nulla. Morbi vestibulum turpis et est luctus, in tempus sapien iaculis. Sed in nisi in leo luctus finibus. Donec mattis eleifend auctor."
    //   }
    // }
  },
  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", () => {
  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);
    }
  }
});

@import url("https://fonts.googleapis.com/css?family=Montserrat:500&display=swap");
.timeline_box {
  width: 1000px;
  height: 50%;
  background: lightslategrey;
  margin: auto;
  margin-top: 10%;
  display: grid;
  justify-content: center;
  align-content: center;
  position: relative; }

.timeline_wrapper {
  width: max-content;
  overflow: hidden;
  height: 200px; }

.timeline_line {
  z-index: 1;
  width: inherit;
  height: 20px;
  margin-top: 90px;
  margin-bottom: 90px;
  background: linear-gradient(to bottom, 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%); }

.timeline {
  z-index: 2;
  list-style: none;
  width: max-content;
  margin-top: 80px;
  margin-bottom: 80px; }
  .timeline > li {
    float: left;
    background: lightslategrey;
    padding-left: 7px;
    padding-right: 7px;
    margin-left: 266px;
    font-size: 2rem;
    border-radius: 5px; }
    .timeline > li:nth-child(1) {
      margin-left: 0; }

button {
  width: 100px;
  height: 30px;
  color: black;
  margin: auto; }

html,
body,
element,
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Montserrat', sans-serif; }

    <div class="timeline_box">
      <div class="timeline_wrapper">
        <ol id="entries" class="timeline">
        </ol>
        <div class="timeline_line"></div>
      </div>
    </div>

PS: I know the entries go off the box, that is the point. In order to achieve what I want to I need to have the entries exceed the limitations of the gray box, along with the line. In my local web server the entries are actually hidden.

Answer 1

Your elements are loaded to the page but you need to check the computed width of the timeLine after the addition of the elements.

So you just need to add the let computedTimelineStyle = window.getComputedStyle(timeline); after the for loop.

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(timeEntries);

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

let computedTimelineStyle = window.getComputedStyle(timeline);
console.log(computedTimelineStyle.width);

.first {
 width: max-content;
  background: red;
  margin:0;
  padding:0;
}

<ul class="timeline first">

</ul>
<ul class="timeline">

</ul>
<ul class="timeline">

</ul>
<ul class="timeline">

</ul>