23

Chrome と Firefox (firebug) の両方でコード エディターを使用して編集できた特定のスタイル要素がコード内に見つかりません。なぜビュー ソースが実際のコードとそれほど異なるのでしょうか? JQuery UI からモーダルを使用しているため、JQuery と Javascript が何らかの処理を行っている (クラスやジャンクを追加する...) ことは知っていますが、なぜスタイル要素が見つからないのでしょうか? 彼らはどこにいる？？？

ソースコード：

<div id="modalEmail-ESI" title="Email - ESI" class="infoModal">

コード エディターから:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalEmail-ESI" style="display: block; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 800px; top: 205px; left: 577px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-modalEmail-ESI">Email - ESI</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="modalEmail-ESI" class="infoModal ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 282px;" scrolltop="0" scrollleft="0">

「要素の検査」コードには、width:800px;変更したいスタイル属性がありますが、コード内で検索したところ、明らかに存在しません。

そのスタイル属性は動的に生成されますか?

更新:あなたのフィードバックに基づいて、スタイル属性が動的な場合にメール モーダルの幅を更新するにはどうすればよいですか?

4

3 に答える 3

31

「ソースを表示」と言うとき、実際の「ソースを表示」ではなく、エディターについて話していると思います。ブラウザーから「ソースを表示」すると、javascript が機能した後ではなく、サーバーによって配信されたとおりの HTML が取得されます。

開発ツールのエディターでは、現時点で存在する DOM を見ています。これには、インライン スタイル、構文解析の修正、および JavaScript の実行の結果であるその他のものが含まれます。

于 2013-09-23T19:36:43.353 に答える
12

「実際のコード」と「ソースを表示」に違いはないはずです。後者は前者を示しているからです。

ソースは、DOM インスペクターのビューとは異なります。これは、次の後に DOM の現在の状態が表示されるためです。

  1. HTMLのブラウザエラー回復
  2. HTML のブラウザ正規化
  3. JavaScript による DOM の操作
于 2013-09-23T19:36:13.580 に答える