javascript - 计算样式不返回元素的计算宽度

Question

为了使时间线的宽度与水平条目列表的宽度相同，我想我可以将有序列表设置为 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);
    }
  }
});

日志:

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:我知道参赛作品开箱即用，这就是重点。为了实现我想要的，我需要让条目超出灰色框的限制，以及该行。在我的本地网络服务器中，这些条目实际上是隐藏的。

Answer 1

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

所以你只需要在 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(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>