実現したいこと

背景に設定したimgタグで設定した画像の高さをと対象箇所の高さを常に同じになるようにJSで設定したいです。

該当のソースコード

PHP
1foreach($array as $value){
2    <div>
3        <img id="js-autoHeightBase" src="hoge.png"> 
4        <div class="js-autoHeightTarget"></div>
5    </div>
6}

JavaScript
1function auto_config_height() {
2	let base = $("#js-autoHeightBase").height();
3	console.log(base);
4	let target = document.getElementsByClassName("js-autoHeightTarget");
5	for(let i = 0; i < target.length; i++){
6		target[i].style.height = base + 'px';
7	}
8	
9	// $(".js-autoHeightTarget").css('height', base);
10	// $(".js-autoHeightTarget").height(base);
11	// document.getElementsByClassName("js-autoHeightTarget")[0].style.height = base + 'px';
12
13	// target[0].style.height = base + 'px';
14
15
16	// debug = $(target).height();
17	// console.log(target);
18
19	// console.log(debug);tyle.height = wh + "px";
20};
21
22$(function() {
23	window.addEventListener("load", auto_config_height, false);
24	window.addEventListener("resize", auto_config_height, false);
25})

試したこと

基準にしてほしい高さはしっかり取得できておりますが、設定することに苦戦しております。
javascriptに加えjqueryを用いて試みておりますが、エラーメッセージも出ません。

yambejp

2022/08/09 00:42

質問がブレるのでjsの質問にphpは入れ込まないほうがよいでしょう imgもどこかサンプル画像サイトからちゃんと表示されるものを用意しないと再現性がなく回答がしづらいです

m.ts10806

2022/08/09 00:51

CSSがないと再現できないかと思います。 style.heightを取っている時点で、CSSの値を見に行きます。あと「うまくいかない」では情報量ゼロなので、どのような想定をしていて何が起きているのが具体的に記載してください。質問は編集できますので、適宜加筆修正してください。

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

回答4件

PHP側の処理、おなじIDで複数のimgを吐き出しているので破綻しています

sample

javascript
1<style>
2.js-autoHeightTarget{
3  background-Color:gray;
4}
5</style>
6<script>
7window.addEventListener('DOMContentLoaded', ()=>{
8  document.querySelectorAll('.js-autoHeightBase').forEach(x=>{
9    const sib=x.nextElementSibling;
10    sib.style.height=x.height+"px";
11    sib.style.width=x.width+"px";
12  });
13});
14</script>
15<div>
16<img class="js-autoHeightBase" src="https://placehold.jp/ff0000/00000/150x100.png?text=1">
17<div class="js-autoHeightTarget"></div>
18</div>
19
20<div>
21<img class="js-autoHeightBase" src="https://placehold.jp/00ff00/00000/80x120.png?text=2">
22<div class="js-autoHeightTarget"></div>
23</div>