Javascriptで要素の幅取得が出来ない

いつもお世話になっております。

今回ご助力いただきたいのは、題目のとおり要素の幅の取得が出来ない件についてです。
以下が私の環境（Win10 x64、Chrome 75）で希望した動作を行わない最小限のソースです。
（最小限のソースのため、<dialog>を表示させるJSは記述しておりません）

HTML
1<!doctype html>
2<html lang="jp">
3	<body>
4		<dialog id="modal">
5			<img id="PrevImg">
6		</dialog>
7		<input type="file" id="img_slct" name="upfile" accept="image/*, video/*, audio/*">
8		<img id="PrevImg2">
9	</body>
10</html>
11<script>
12	const ImgID = document.getElementById("img_slct");
13	// ImgID.addEventListener('click', function(e)
14	// {
15		// this.value = null;
16	// });
17	ImgID.addEventListener('change', function(e)
18	{
19		const FileList = e.target.files;
20		if( FileList[0].type.indexOf("image") < 0 )
21		{
22			return false;
23		}
24		var Img = new Image();
25		Img.onload = function()
26		{
27			const img = document.getElementById('PrevImg');
28			// const img = document.getElementById('PrevImg2'); //こっちなら想定通りのコンソール結果出力
29				img.src = this.src;
30				img.style.width = "81vw";
31				img.style.height = "auto";
32				
33			console.log(img.width); //PrevImg：画像本来の幅、PrevImg2：表示幅
34			console.log(img.style.width); //81vw
35			console.log(img.getBoundingClientRect().width);//PrevImg：0、PrevImg2：表示幅
36		}
37		Img.src = window.URL.createObjectURL(FileList[0]);
38	});
39
40</script>

最小限のソースのため記述しておりませんが、
実際には画面の縦横比と画像の縦横比から、画像の表示幅/高を決定しております。
そのうえで、画像の表示幅に合わせて親要素である<dialog>表示幅/高を設定したいと考えております。

お尋ねしたい点
１．どうすればPrevImgの方で表示幅が取得できるか
２．現在は子要素であるimgから親要素であるdialogの表示幅を計算しようとしているが、子要素がウィンドウサイズに合わせて自動で変化するのに合わせて親要素を自動で変化させる方法はあるか
です。
特に、２に関しては

CSS
1dialog
2{
3	display: inline-block;
4}

では想定通りの動きをしませんでした。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

どうすればPrevImgの方で表示幅が取得できるか

<dialog id="modal" open>とすると取得できましたので、表示されていない場合は取得できないのではないのかな、と思いました。

現在は子要素であるimgから親要素であるdialogの表示幅を計算しようとしているが、子要素がウィンドウサイズに合わせて自動で変化するのに合わせて親要素を自動で変化させる方法はあるか

dialog要素の幅は、元々コンテンツ依存だと思います。当方で確認したところ、そのように動作しました。

投稿2019/07/08 00:57

Lhankor_Mhy

総合スコア37408

Null0lluN

2019/07/08 06:27

ありがとうございます。 dialogに関してですが、ブラウザウィンドウ幅を動かすと画像は自動でサイズが変わってくれますが、私の環境ではdialog要素は変化しないので、それを何とかしたいです。

Lhankor_Mhy

2019/07/08 06:45

> ブラウザウィンドウ幅を動かすと画像は自動でサイズが変わってくれますが、私の環境ではdialog要素は変化しないわかりました。当方の環境では変化しました。 https://jsfiddle.net/Lhankor_Mhy/rxsnc5y2/ ↑このページについて、Null0lluNさんの環境では、ブラウザ幅を変えたときにdialog要素の幅は変化しますか？もし、変化しないのであれば、環境の問題かと思います。もし、変化するのであれば、ご提示いただいていない部分の問題かと思います。

Null0lluN

2019/07/08 12:40

リンク先の要素幅は変化しました。また、dialog openでも変化しました。削った部分のどこが問題なのかは現時点では分かりませんが、「表示されていないと要素幅を取得できない」ということが学習できましたので今回はこれで解決とさせていただきます。ありがとうございました。

行動規範の内容に同意します