element.styleでjsに上書きされている元のcssの探し方が知りたい

Question

実現したいこと

element.styleで変更されているccsの探し方を知りたいです。

HP制作中、いいねボタンを設置できるプラグインを導入したところボタンを押した後に表示されるポップアップの表示場所が思い通りにいかず、試しにテーマを変更して確認したところ問題なく動いたので、テーマ内にあるプラグインとバッティングしている部分の記述を探したいです。

chromeの開発者ツールでelement.styleの欄でポップアップの表示場所が指定されていたのでプラグインのjs記述を確認しましたがそちらは問題なさそうでした。添付しておきます。

該当のソースコード

			// メッセージボックス
			if (!$('div#mwc-message-box-' + data.post_id)[0]) {
				var msgBox =
				'<div class="maroyaka-webclap mwc-message-box" id="mwc-message-box-' + data.post_id + '" style="display: none;">' +
					'<div class="mwc-message-box-inner">' +
						'<img src="' + data.close_img + '" class="close" title="閉じる" />';

						// お礼メッセージ
						if (data.thanks_msg) {
							msgBox += '<p class="thanks-msg">' + data.thanks_msg + '</p>';
						}

						// お礼絵
						if (data.thanks_img_val) {
							msgBox += '<img class="thanks-img" src="' + data.thanks_img_val + '" />';
						}

						msgBox +=
						'<form action="" name="mwc-message-form">' +
							'<input type="hidden" name="action" value="send_message" />' +
							'<input type="hidden" name="post_id" value="' + data.post_id + '" />' +
							'<input type="hidden" name="clap_id" value="' + data.clap_id + '" />' +
							'<input type="hidden" name="_ajax_nonce" value="' + data.ajax_nonce + '" />';

							// 名前入力欄
							if (data.name_input) {
								msgBox += '<input type="text" name="name" value="" class="form-control" placeholder="お名前">';
							}

							// 定型文選択欄
							if (data.set_phrases_select && data.set_phrases.length > 0) {
								msgBox += '<select name="set_phrases" class="form-control">';
								msgBox += '<option value="">▼定型文</option>';
								for (var i = 0; i < data.set_phrases.length; i++) {
									if (data.set_phrases[i]) msgBox += '<option value="' + data.set_phrases[i] + '">' + data.set_phrases[i] + '</option>';
								}
								msgBox += '</select>';
							}

							// メッセージ入力欄
							if (data.message_input) {
								msgBox += '<textarea name="message" rows="5" placeholder="メッセージ" class="form-control"></textarea>';
							}

							// 送信ボタン
							msgBox +=
							'<button type="submit" class="btn btn-primary">送信</button>' +
						'</form>' +
					'</div>' +
				'</div>';
				$('body').append(msgBox);

				// 表示位置指定
				$msgBox = $('#mwc-message-box-' + data.post_id);
				var $win = $(window);

				if ($win.width() > 768) {
					// PC
					var mwcOffset = btnObj.offset();
					var mwcHeight = mwcObj.height();

					var mbTop = mwcOffset.top + mwcHeight + 12;
					var mbLeft = mwcOffset.left;

					// 管理バー
					if ($('#wpadminbar')[0]) {
						mbTop -= $('#wpadminbar').height();
					}

					$msgBox.css({
						top: mbTop,
						left: mbLeft
					}).addClass('arrow').show();
				} else {
					// タブレット
					var mbTop = ($win.height() - $msgBox.height()) / 2 + $win.scrollTop();
					var mbLeft = ($win.width() - $msgBox.width()) / 2 + $win.scrollLeft();
					$msgBox.css({
						top: mbTop,
						left: mbLeft
					}).show();
				}
				$msgBox.find('select, textarea, input[type="text"]')[0].focus();
			} else {
				// 拍手IDのみ更新する
				$('div#mwc-message-box-' + data.post_id).find('input[name="clap_id"]').val(data.clap_id);
			}
		});
	}).

Comments

[Lhankor_Mhy]

devtools はお使いになってますか？

[thiashe]

コメントありがとうございます。chromeの開発者ツールのことで間違いなければ試しました。element.styleで場所が指定されており、プラグインのjsの記述は確認したところ問題なさそうでした。
質問に追記しておきます。

[Lhankor_Mhy]

「element.style で設定したスタイルを打ち消しているCSSの箇所を知りたい」というご質問かと思ったのですが、違いましたか？

[thiashe]

無知で申し訳ありません、おっしゃっている意味がよくわかりません。
ボタンを押すとポップアップが表示されるプラグインを導入した→スマホで押すとポップアップがかなり下に表示されてしまう→開発者ツールのelementsタブでポップアップの場所を確認するとstyleタブのelement.styleの欄に
element.style {
top: 5771.31px;
left: 80.5px;
}
という記述があり、こうなっている原因を探しています。

[Lhankor_Mhy]

ということは、CSSの探し方ではなくて、JavaScriptの記述を探したいということですか？

[thiashe]

そうかもしれません。そもそもの探し方を知りたいです。
http://coneko.starfree.jp/wp/%e3%83%86%e3%82%b9%e3%83%88%e6%8a%95%e7%a8%bf%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab/
上記URLのページの下部にあるweb拍手ボタンを押すと出るポップアップを直したいのがそもそもの目的です。

[Lhankor_Mhy]

どのように直したいのかが今一つわからない感じです。この斜めになっているのは意図したとおりなんですか？

[thiashe]

ウィンドウ幅によって微妙に挙動が違います。pcは画面下部で見切れないようにするためなのか勝手に傾きますし、スマホなど幅の狭い画面ではかなり下に表示されます。どちらも同じような原因から発生していると思いますのでとにかく問題の記述場所を探しているのです。

[Lhankor_Mhy]

くり返しになりますが、どのように直したいのかが伝わってこないので、「こう直すべき」という回答が難しい状態です。斜めに表示したいのかそうではないのかについても、まだご回答いただいていない認識です。

ちなみに、斜めになっていることと、element.styleとは、当方からは関連がないことのように見えています。

[thiashe]

質問にも書いていますが、修正したいのは表示場所、位置です。斜めになっているのは後回しで放っておいて構いません。
どう直したいのかでいえば、スマホ表示では画面中央にポップアップするように…最初のコメントで質問に添付したプラグインのjsの記述通りに直したいです。ですので邪魔している記述がある場所を探しています。この表現で伝わったでしょうか？

[Lhankor_Mhy]

過去の質問を拝見したのですが、ひとつ前の質問と同じ内容ということでいいでしょうか？
https://teratail.com/questions/l6jln0gdumi7sn

[thiashe]

いいえ、もう前回の質問で書いた「記述の意味が分からない」は自力で解決したので、これが正常に反映されない原因を探しています。

[Lhankor_Mhy]

どのような位置が正しいのかを伝えていただかないと、あなたしかわからないと思うんですよね……
とりあえず、現在の位置では下すぎるということでいいでしょうか？

[Lhankor_Mhy]

「正常に反映されない」というのは、「正常」がわからないと解決が難しいと思うんですよね……

[Lhankor_Mhy]

top や left の値は正しく反映されてそうですので、つまりは、top の値が異常である、みたいなことをおっしゃりたいのですか？

[thiashe]

？先ほどお答えしたと思うのですが、「スマホ表示では画面中央にポップアップするように直したい」では伝わらなかったでしょうか？
「正常」にとは、質問に添付してある記述でも分かるかと思うのですがプラグインのjsではウィンドウ幅の狭い端末からボタンを押したら「画面中央にポップアップが表示される」よう記述されているようなので、其れ通りに反映させたいです。

[thiashe]

top や left の値は正しく反映されてそうですので、つまりは、top の値が異常である、みたいなことをおっしゃりたいのですか？
＞はいそうです。

[Lhankor_Mhy]

ああ、なるほど、記述を見落としてましたね。失礼いたしました。
画面中央というのは、現在のスクロール位置の画面中央ということですね。理解しました。

[thiashe]

はい、そうです。

[Lhankor_Mhy]

ご解決されましたか？ なにかわからないことがあればご連絡ください。

Answer 1

ウィンドウ幅によって微妙に挙動が違います。pcは画面下部で見切れないようにするためなのか勝手に傾きます

「開発者ツール」で一目瞭然なはずですが、傾くのは arrow をクラスに追加しているからですね。
＿＿「該当のソースコード」の73行目
＿＿付加したかったのは別のクラスだったんじゃないかと

「画面中央にポップアップが表示される」よう記述されているようなので
画面中央というのは、現在のスクロール位置の画面中央ということですね
はい、そうです。

タブレットではその様な記述になっていますが、PCではそうなっていない様です。
web拍手ボタンを内包している要素（<div class="maroyaka-webclap）の下辺りを狙っているにすぎない感じです。
＿＿「該当のソースコード」の59～63行目
web拍手ボタンをクリックできる位置までスクロールしているのだから、その下に msgBox が表示されるのは妥当な仕様でしょう。

つまり、「テーマ内にあるプラグインとバッティングしている部分の記述を探したい」というご質問ですが、バッティングは存在せず、画面中央に表示さえると思い込んでいたのが間違っていただけという事かもしれません。

Answer 2

HTMLの冒頭にBOMと思われるコードが混入しています。そちらを取り除いてはいかがでしょうか？

---

「質問に対する回答となっていない投稿」という指摘を受けたので解説追記

この質問は「JavaScriptが想定していない結果を返す」というものです。
ですので、「JavaScriptが想定している結果を返す」ようになる可能性があれば、回答として十分であると考えています。
この前提が共有できないようであれば、この先は読まなくていいです。
また、ご質問者の thiashe さんも、読まなくても問題のない内容ですので、どうぞ読み飛ばしてください。

---

さて、ご提示のコードのどの部分が想定していないのかを確認したところ、($win.height() - $msgBox.height()) / 2 + $win.scrollTop()の部分の結果が異なるようで、この内の$win.height()が異なるようでした。
（なお、$win = $(window)です。）

ところで、jQuery.fn.heightのコードを github で確認したところ、以下のようなものでした。

if ( isWindow( elem ) ) {


        // $( window ).outerWidth/Height return w/h including scrollbars (gh-1729)
        return funcName.indexOf( "outer" ) === 0 ?
                elem[ "inner" + name ] :
                elem.document.documentElement[ "client" + name ];
}

https://github.com/jquery/jquery/blob/c98597eaf5e144ee5e549cb41984687cd1033068/src/dimensions.js#L28C1-L28C1

つまり、どうやら、jQueryはwindow.document.documentElement.clientHeightを見ているようでした。

---

さて、「質問に対する回答となっていない投稿」という指摘受けている「HTMLの冒頭にBOMと思われるコードが混入しています。そちらを取り除いてはいかがでしょうか？」という回答ですが、こちらがJavaScriptが想定している結果を返すようになるものであることを示すため、HTMLの冒頭に（BOMだとコピペが困難なので）0と記載したテスト用コードを提示します。

0
<!DOCTYPE html>
<html lang="ja">

<head>
</head>

<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        console.log($(window).height())
        console.log(window.innerHeight)
        console.log(window.document.documentElement.clientHeight)
    </script>
</body>

</html>

↑こちらが余分なコードを追加したもので、↓こちらが余分なコードがないものです。

<!DOCTYPE html>
<html lang="ja">

<head>
</head>

<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        console.log($(window).height())
        console.log(window.innerHeight)
        console.log(window.document.documentElement.clientHeight)
    </script>
</body>

</html>

実行していただくとわかるのですが、コンソールに表示される数字が前者と後者で異なります。
言うまでもないですが、DOCTYPE宣言前に余分なコードを追加すると、DOCTYPE宣言が無効になります。どうやら、window.document.documentElement.clientHeightは、後方互換モードだと違う数字を返すのだと思います。
同様のことを書いた記事が、ググると見つかりました。
JavaScriptでのページ内スクロールとDOCTYPE宣言でハマった話

---

まとめると、

• ご提示のページのHTML冒頭に余分なコードが含まれてた
• HTML冒頭に余分なコードが含まれているとDOCTYPE宣言が無効になる
• 後方互換モードだとwindow.document.documentElement.clientHeightが返すものが違う
• 問題のコードではwindow.document.documentElement.clientHeightを参照してた

ということです。
以上から、「JavaScriptが想定している結果を返す」ようになる可能性がある回答であると考えていますし、その可能性があると考えることに十分に合理的な根拠があると考えています。
ですから、たとえこの対処で問題が解決しなかったとしても、「質問に対する回答となっていない投稿」という指摘には当たらないです。

---

修正依頼をかけた方へ。
（どうせもう読んでないんだろうけど、万万が一）この追記を読んでいて内容に納得するようであれば、修正依頼を撤回してください。納得できないのであればコメントでお知らせください。

---

なお、「最初からそう書いておけばいいじゃん」という意見もあるかもしれませんが、ご質問者はあまりWEB製作経験がある方ではないと判断していましたので、これらのことを書くと冗長すぎると考え、修正内容を提示するのみにとどめました。

Comments

[Lhankor_Mhy]

「質問に対する回答となっていない投稿」という指摘をされた方、もう少し具体的な指摘をお願いします。直しようがないので。

[Lhankor_Mhy]

とりあえず、追記しました。なんか反論があればどうぞ。