使用 javascript 更改 div 宽度并移动内部 div

Question

我需要使用按钮驱动的 javascript 将右对齐的 div 从一个位置移动到另一个位置。

因此页面被渲染，外部 div 是使用position:relative;width:250px; 设置的宽度。内部 div 使用position:absolute;right:0px; 将其放置在外部 div 的最右侧。

我假设如果我的 javascript 设置了外部 div 的宽度，它会改变外部 div 的宽度，而内部 div 会相对移动。但它不会移动（即使获取外部 div 的宽度值确认已设置新值）。

这是否意味着一旦页面被渲染就不能改变 div 的宽度？因为如果浏览器窗口宽度发生变化，它们可以被更改，我认为这是可能的。

<div id="test" style="display:inline-block;position:relative;width:250px;">
    <div style="display:inline-block;">
        Some text
    </div>
    <div style="display:inline-block;position:absolute;right:0px;">
        Some more text
    </div>
</div>
<br>
<br>
<button type="button" onclick="resizeouter(500);">
    Move Right
</button>

<script>
function resizeouter(newsize){
    document.getElementById('test').width=newsize+"px";
    //alert(document.getElementById('test').width);
}
</script>

我尝试过使用和不使用 +"px"。

JSFiddle

提前致谢。

Answer 1

你需要添加.style.width

https://www.w3schools.com/jsref/prop_style_width.asp

function resizeouter(elementID, newsize){
  let div = document.getElementById(elementID); // current element
  let currentWidth = div.offsetWidth; // current width of your element
  let finalWidth = currentWidth + newsize; // addition of current width + newsize

  div.style.width=finalWidth+"px"; // set the new width for this element 
  //alert(document.getElementById('test').width);
    
  // debug infos
  console.log(currentWidth + ' + ' + newsize + ' = ' + finalWidth);
}

<div id="test" style="display:inline-block;position:relative;width:250px;">
    <div style="display:inline-block;">
        Some text
    </div>
    <div style="display:inline-block;position:absolute;right:0px;">
        Some more text
    </div>
</div>
<br>
<br>
<button type="button" onclick="resizeouter('test', 500);">
    Move Right
</button>

Answer 2

你要找的是style.width:

document.getElementById('test').style.width= newsize+"px";