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：我知道条目不合常规，这就是重点。为了实现我想要的功能，我需要使输入项与行一起超过灰色框的限制。在我的本地Web服务器中，条目实际上是隐藏的。

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>

Answer 2

有时候，您必须花一些时间浏览器来计算所有内容。尝试在DOMContentLoaded之后的几毫秒内使拾取代码超时，以检查它是否对您有用。

如果不起作用，请尝试使用dom对象的offsetWidth属性（https://developer.mozilla.org/es/docs/Web/API/HTMLElement/offsetWidth）。它应该以px为单位返回宽度。

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

2 个答案: