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

Posted 2023-05-08

【中文标题】使用 javascript 更改 div 宽度并移动内部 div

【英文标题】：Use javacript to change a div width and move an inner div

【发布时间】：2022-01-04 01:19:04

【问题描述】：

我需要使用按钮驱动的 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

提前致谢。

【参考方案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>

【讨论】：

这完全有效且有意义。谢谢！

请验证我的答案

【参考方案2】：

你要找的是style.width:

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

【讨论】：

我看了这么久都没注意到它不见了。谢谢！