WordPressでJavascriptのstyle.marginTopが動かない

Question

前提・実現したいこと

WordPressでJavascriptのstyle.marginTopが動かない．

Javascriptで要素サイズを取得，計算して別の要素のmargin-topに使いたいのですが，うまくいきません．

．．．デバッグモードをtrueにして開発中，うまく動いていたのですが，公開のためにfalseにしたところ，なぜか動かないのです．

発生している問題・エラーメッセージ

デバッグモードfalseの場合

正常に動作する．

デバッグモードtrueの場合

console.logで確認したところ，要素のサイズなどは取得できているが，"要素.style.marginTop"の値が空で出力される．

試したこと

BJ Lazy Loadという読み込み遅延系のプラグインを入れてたこともあり，とりあえず全てのプラグインを無効化　→　ダメ
Javascriptのみデバッグを入れてみる「define('SCRIPT_DEBUG', true);」　→　ダメ
あとはソースコードは色々触ってみましたが．．．

該当のソースコード

              <?php // YouTube埋め込み ?>
              <?php if (!empty($data_list['youtube'][0])) {
                // URLから動画IDのみ抽出
                $videoId = ltrim($data_list['youtube'][0], 'https://youtu.be/'); ?>

                <?php // 幅取得用 ?>
                <div id='get-width'></div>

                <?php // 提供元 ?>
                <div id='presented-by'>
                  <a href="https://www.hogehoge.com/" data-lightbox="group"><img src="hogehoge.png"></a>
                </div>

                <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
                <div id='youtube'></div>

                <script>
                //*** 動画のアスペクト比 ***//
                var aspectWidth = 16,
                aspectHeight = 9;


                jQuery(function ($) {
                  $('#presented-by').hide();
                });

                // 動画の横幅は100%で比率に合わせて表示
                var youtubeWidth = document.getElementById('get-width').clientWidth,
                youtubeHeight = (youtubeWidth/aspectWidth) * aspectHeight;

                // 提供元の表示位置を中央に調整
                var presentedBy = document.getElementById('presented-by');
                presentedBy.style.marginTop = youtubeHeight/2 - presentedBy.clientHeight/2;


                // 2. This code loads the IFrame Player API code asynchronously.
                var tag = document.createElement('script');

                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                // 3. This function creates an <iframe> (and YouTube player)
                //    after the API code downloads.
                var player;
                var videoId = <?php echo json_encode($videoId); ?>;
                function onYouTubeIframeAPIReady() {
                  player = new YT.Player('youtube', {
                    width: youtubeWidth,
                    height: youtubeHeight,
                    videoId: videoId,
                    events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                    }
                  });
                }

                // 4. The API will call this function when the video player is ready.
                function onPlayerReady(event) {
                  event.target.playVideo();
                }

                // 5. The API calls this function when the player's state changes.
                //    The function indicates that when playing a video (state=1),
                //    the player should play for six seconds and then stop.
                var done = false;
                function onPlayerStateChange(event) {
                  // 動画終了後と一時停止中に画像を表示
                  var status = player.getPlayerState();
                  if (status == 0 || status == 2) {
                    jQuery(function ($) {
                      $('#presented-by').fadeIn(1000);
                    });
                  } else {
                    jQuery(function ($) {
                      $('#presented-by').fadeOut(1000);
                    });
                  }
                }
                </script>
              <?php } ?>

以上のコードの

presentedBy.style.marginTop = youtubeHeight/2 - presentedBy.clientHeight/2;

この部分だけがデバッグモード外したら動きません．

どなたかお力をお貸しください．よろしくお願いします．．．

Comments

[miyabi_pudding]

その要素の、marginTopの値は、最終的にはどんな感じになってますか？

可能性として、
要素、そのサイズなどが取得できているっていうことは、
その行以降の処理で、質問者さん自身のか、もしくは別ライブラリにおいて、
値が改変されている可能性があると思いまして、質問でした。

[kei344]

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

[a2h1r0]

すみません．お騒がせ致しました．
解決済みにさせていただきます．

Answer 1

早速の回答ありがとうございます．

実はついさっき，自己解決してしてしまいました^^;
結論としては，.styleではなく.setAttributeを使用することで動作しました．

ただ，.styleが動かない理由がイマイチわからないので，なにか思いつくことがあれば，教えてくださると幸いです．

↓自身のブログにて試したことなど詳細を投稿しています．こんな感じでした．(アフィリエイトとかではないです)
WordPressでJavascriptのstyle.marginTopが動かない

Comments

[miyabi_pudding]

これ、原因めちゃ気になりますね。
HTMLElementとして認識されてないのかな・・・。
汎用的な要素なんですよね？
オリジナル要素とかだったら、styleプロパティでは、だめなのかも。
（styleは内部的にセッターが動いていると思われるため、JavaScript上でHTMLElementである必要がある）
もしかしたら、xml拡張的な新要素だが、（その場合setAttributeは効きます）ブラウザの処理では、style属性あるから、CSS効いた、とか・・・？

[a2h1r0]

何がしたいかと言うと，YouTube埋め込み動画の上に画像を表示してあげたいということで，divで画像エリアを作って，それを動画の中央になるように上マージンを取っているだけなのですが．．．

div自体は普通のモノですし，強いて言うならYouTube埋め込み動画のほうがAPIで内部的にiframeに変換されているんですが，今回はdivの方のstyleを変更する話ですし．．．

これ一番不思議なのが，なぜデバッグモードでは正常に動作するのかなんですよね．．．読み込み順とか変化するのかなあと思ったのですが．

回答ありがとうございました．迷宮入りです．．．^^;