CSS或Javascript从另一个元素获得的百分比，而不会造成页面加载的不良影响

我曾尝试用谷歌搜索这个问题的堆栈溢出，但没有成功

问题是，我想基于另一个元素设置其宽度的元素已经被浏览器加载到自己的宽度，然后被javascript更改为我当前的解决方案，以及我发现的大多数解决方案，这些解决方案在加载时会产生不需要的转换

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

CSS

Javascript

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

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

如果您的pageLogo为固定宽度，则可以在css中使用calc：

---

或者，正如CBroe在评论中所说，您可以使用flex，从一开始就改变您构建此布局的方式可能更有意义……但建议您首先向我们描述该布局的实际内容。如果这只是“一行”中的两个元素，那么您可能应该从绝对定位东西改为使用flexbox。从您的问题很难说，但除了CBroe的评论之外，您可能希望在css中查找calc。。。然后可以执行类似于width的操作：calc100%-30px，其中30px是固定宽度元素

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

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

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