javascript - 来自另一个元素的 CSS 或 Javascript 百分比没有加载页面的不良影响

Question

我曾尝试用谷歌搜索并搜索堆栈溢出以查找此特定问题，但没有成功。

问题是我想根据另一个元素设置其宽度的元素已经被浏览器加载到它自己的宽度，然后被产生的 javascript(我当前的解决方案，以及我找到的大多数解决方案)更改负载时不需要的过渡。

我的问题是有一种方法可以在 el 之前使用 javascript 设置元素的宽度。是否已加载或是否有任何其他方式使用 CSS 和一些变量或其他什么？

CSS

#designsBar {
    position: absolute;
    top: 9rem;
    left: 12.5%;
    padding-right: 1rem;
    border-right: 1px solid #999;
}

Javascript

window.onload = function(e){
  var widthN = document.getElementById('logoTxt').offsetWidth + document.getElementById('pagelogo').offsetWidth;

  document.getElementById('designsBar').style.width = widthN - 16 + "px";
};

Answer 1

如果您的 pageLogo 是固定宽度，您可以在 css 中使用 calc:

#designsBar{
    width: calc(100% - "add whatever your pixel width of logo is here"px)
}

或者如 CBroe 在评论中所说，您可以使用 flex