addEventListener内のgetComputedStyleが、更新されず同じ値を返す

実現したいこと

いつもありがとうございます。表題の通り、addEventListener内のgetComputedStyleが、更新されず同じ値を返します。

前提

getComputedStyleは生きている値を返すとあるのですが、それとは違う挙動をします。
該当のソースコードでは、前後の、関係ないと判断したコードは抜いています。

該当のソースコード

JavaScript

1function embiggen(event) {2 event.preventDefault();3 let rawTransform = window.getComputedStyle(townBG).transform;4 let bakedTransforms;5 if(rawTransform != "none"){6 bakedTransforms = rawTransform.match(/^matrix\((.+)\)$/)[1].split(', ');7 // ここと8 console.log(bakedTransforms[0]);9 }10 if(event.wheelDelta <= 0){11 if(rawTransform == "none" || Number(bakedTransforms[0] == 1)) {12 townBG.style.transform = "scale(1.02)";13 }else {14 townBG.style.transform = "scale(" + (Number(bakedTransforms[0]) * Number(bakedTransforms[0])) + ")";15 rawTransform = window.getComputedStyle(townBG).transform;16 bakedTransforms = rawTransform.match(/^matrix\((.+)\)$/)[1].split(', ');17 // ここが同じ値になってしまう18 console.log(bakedTransforms[0]);19 if(Number(bakedTransforms[0]) >= 53) {20 townBG.style.transform = "scale(53)";21 window.removeEventListener("wheel", embiggen, { passive: false });22 window.addEventListener("wheel", stomachScroll, { passive: false });23 console.log("胃袋が足され、でっか化が消されました");24 }25 }26 }else {27 if(rawTransform == "none") {28 29 }else {30 if(Number(bakedTransforms[0]) <= 1.02){31 townBG.style.transform = "scale(1.02)";32 }else {33 townBG.style.transform = "scale(" + Math.sqrt(Number(bakedTransforms[0])) + ")"; 34 }35 }36 }37};

試したこと

Googleでget computed style addeventlistener、get computed style not liveと検索
teratailでgetcomputedstyle addeventlistenerと検索
(10000件のヒットがありましたが全ては見ていません)
chatGPTに聞いたのですが、asyncを使えばよいとの返答が来ました

コメントを投稿

0 コメント