要素のリサイズをひろい、他の要素をそのサイズにしたい

初期サイズのみを拾い、リサイズ時は要素 x_01 をリサイズしてくれません。
x_01 も、x_02 と常時、同じサイズにしたいです。
仮に html は div とします。

わかる方おりましたら、よろしくお願いします !


let client_w = document.getElementById('x_02').clientWidth;
let client_h = document.getElementById('x_02').clientHeight;

const addStyleAttributeOneHundredthVP = () => {

document.getElementById('x_01').style.width = client_w + 'px ';
document.getElementById('x_01').style.height = client_w + 'px ';

}
window.addEventListener( 'DOMContentLoaded', addStyleAttributeOneHundredthVP );

window.addEventListener( 'load', addStyleAttributeOneHundredthVP );

window.addEventListener( 'resize', addStyleAttributeOneHundredthVP );

No.3 ベストアンサー 回答者： fujillin 回答日時： 2021/08/10 17:19

No2です

連投すみません。

divの中に画像などが存在する場合は、
＞window.addEventListener('DOMContentLoaded', e=>{
の部分は
　window.addEventListener('load', e=>{
にしておいた方がよさそうですね。

あと、overflowの設定によっては「同じサイズ」にならないことも生じ得ると想像されます。
（内包要素がどのようになっているのかわからないので、何とも言えませんけれど）

この回答へのお礼

回答ありがとうございます。
感謝します !!

お礼日時：2021/08/10 18:50

No.2 回答者： fujillin 回答日時： 2021/08/10 17:01

こんにちは

なさりたいことがよくわかりませんけれど・・・

＞x_01 も、x_02 と常時、同じサイズにしたいです
というわりには、ご提示のスクリプトでは
＞　～～style.height = client_w + 'px ';
としているので、同じサイズにはならないと思いますが・・・
（幅を基準にした正方形にしたいということ？？）

よくわからないけれど、文章他の雰囲気からすると『x_02のサイズを基準にして、x_01を同じサイズにしておきたい』ということでしょうか？？
（どちらを基準にするかで、スクリプトは変わってきます）
トリガーとしては、「初期表示時」と「windowの resize時」に限定してよいのでしょうか？

仮に、上記でよいのもとするなら・・・
（結果的に、以下はx_01のサイズを設定するだけのスクリプトです）

window.addEventListener('DOMContentLoaded', e=>{
const
x01 = document.getElementById('x_01'),
x02 = document.getElementById('x_02'),
sizeSynchronizer = e=>{
x01.style.width = x02.clientWidth + 'px';
x01.style.height = x02.clientHeight + 'px';
};

window.addEventListener( 'resize', sizeSynchronizer );
sizeSynchronizer();
});

とかでできそうな気がしますけれど・・・

※なんだか、 x_01にも同じようにCSSを設定しておけば済むことのような気もしますけれど・・・

この回答へのお礼

回答ありがとうございます。

お礼日時：2021/08/10 18:50

No.1 回答者： hiroko24 回答日時： 2021/08/10 16:41

cssでflexboxを使えば良いのでは？

この回答へのお礼

回答ありがとうございます。

ie11 にも対応させないといけないので、js にしました。

お礼日時：2021/08/10 16:47