HTMLのタグに直接ベタ書きでstyleタグを記載するのではなく、
「他の処理で追加する」もしくは「追加している処理を探る」にはどうすればよいのでしょうか？
Chromeのデベロッパーツールの「Elements」タブのStylesにてCSSをいじっており、
画面に対してはじめから”element.style”が指定されている ＝ HTMLのタグに直書きされている箇所を発見しました。
これはHTMLにベタ書きされているものではないことは確認しているので、では何の処理で挿入されているの？と疑問に思いました。
<div class="header" style="margin: 10px;">
element.style {
margin: 10px;
}
質問が曖昧で申し訳ありませんがよろしくお願いいたします。
HTML のソースでは <div class="header"> だが要素をデベロッパーツールで見ると style 属性を持っているということですね。 JavaScript で動的に style 属性を追加していると考えられます。例：
<div class="header">Header</div>
<script>
const el = document.querySelector('.header');
el.style = 'margin: 10px';
</script>
これは素の JS で要素の style プロパティをセットする例ですが、スタイルを操作するライブラリを使っていることも考えられるのでこの通りのコードとは限りません。
どこで処理が行われているかを知るにはデベロッパーツールの DOM breakpoints が使えます。 Elements タブで対象の要素を右クリックし Break on > attribute modifications を選んでブレークポイントを仕掛け、ページをリロードすると、要素の属性が操作されたタイミングで JS の実行が止まってそのコードが表示されます。
ただ、ページのロード直後に操作が行われるとブレークポイントが間に合わないかもしれません。その場合は JS のコードに目を通して探すしかないと思います。要素のクラス名や ID で検索すると見つけやすいかもしれません。
@tqwko_05
Questioner
おそらくJavaScriptでDOM(HTML)をいじっているのではないでしょうか。
<script>
const div = document.getElementsByClassName('header');
div[0].style.margin = '10px';
</script>
とか似たようなことがどこかに書いているかもしれません。（jQuery等ライブラリを使っていれば全然見た目は違いますが。）
@tqwko_05
Questioner