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：我知道这些条目是开箱即用的，这就是重点。为了实现我想要的，我需要让条目超过灰色框的限制，以及线条。在我的本地 Web 服务器中，这些条目实际上是隐藏的。

标签： javascriptcss

Answer 1

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

所以你只需要let computedTimelineStyle = window.getComputedStyle(timeline);在 for 循环之后添加。

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>