如何计算剩余空闲 space 或 div 的宽度？

Question

我正在寻找一种方法来计算动态添加内部跨度后 div 的剩余宽度

GetWidth() {
    let txt = divElement;
    console.log(event.target.closest('span').scrollWidth);
  }

HTML

<div
class="wrapper"
style="border: 1px solid gray; height: auto; width: 230px"
>
<span
*ngFor="let item of pgFilters[i].value; let i = index"
class="cont"
>
{{ item }}
</span>
<input (keyup.enter)="add($event, i)" class="inputx" />
</div>

风格

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.inputx {
  flex-grow: 1;
}

TS

add(event: any, index: number): void {
    const value = (event.target.value || '').trim();
    if (value) {
      this.pgFilters[index].value.push(value);
      event.target.value = '';
}

我已经添加了完整的代码..这里我尝试自己实现芯片控制..

Answer 1

你可以像这样使用parentElement

function remaining(){
let txt = divElement;
let parent=txt.parentElement;
let remain=parent.offsetWidth-txt.offsetWidth}

如果你可能在这个元素中有多个 child 你可以这样做

function remaining(){
    let txt = divElement;
    let parent=txt.parentElement;
Let child=parentElement.children;
 let remain=parent.offsetWidth;
child.foreach(element=>{
remain-=element.offsetWidth;
}
conole.log(remain);
   }

Answer 2

这应该可以解决问题：

它使用yourSpan.getBoundingClientRect()得到了最后一个<span>的直角坐标..所以返回对象的right属性描述了距离左边的距离div... 所以如果你知道父 div 的宽度.. 你可以从 div 中减去 right 属性的值宽度。

function GetRemainingWidth(){
  var div = document.getElementById("div1");
  var w = div.offsetWidth - div.children[div.children.length - 1].getBoundingClientRect().right;
  return `${w}px`
}

console.log(GetRemainingWidth());

<div id="div1">
I weas here
  <span>I am Great!</span> <span>Are you?</span>
</div>

要使此代码正常工作...请在 html 中执行以下操作。将 <span> 元素放入与输入不同的包装器中。

<div class="wrapper" style="border: 1px solid gray; height: auto; width: 230px">
  <div class="filter-elements" id="filter-elements">
    <span *ngFor="let item of pgFilters[i].value; let i = index"
        class="cont"
    >
      {{ item }}
    </span>
  </div>
  <input (keyup.enter)="add($event, i)" class="inputx" />
</div>

如何计算剩余空闲 space 或 div 的宽度？

How to compute the remaining free space or width of div?

angular