0

こんにちは、 CSS3の新しいhtmlタグのデモンストレーションを行っています。ソース コードと出力の両方を比較して簡単に表示および解釈できるように、ドキュメントを作成しています。ソース コードに移動して、ファイルをブラウザで閲覧する

ソース コードと出力の両方を同じ html ページで表示できれば素晴らしいと思います。

たとえば (下に添付したページから話しています) ソース コードを選択した場合、ソース コードは画面上またはテキスト エディターのいずれかから表示する必要があります。

できるかどうかわかりませんが、できればどなたか教えていただけると助かります。

ソースコードのリンクをクリックすると、ソースコードが表示される必要があります

4

2 に答える 2

2

1 つの要素だけのソースを取得するには、次のようにします。

HTML: <div id="one"><span id="two"></span></div>
JS:

document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>

ページ全体のソースを取得するには、次のようにします。

document.doctype + document.documentElement.outerHTML

document.doctypedoctype を返し、タグとその中のすべてdocument.documentElement.outerHTMLのコードを返します。<html>

于 2012-08-16T11:16:16.157 に答える
1

最新のすべてのブラウザー (最も高度なブラウザーは Chrome と Firefox) にある開発者ツールを使用します。

通常、このようなツールセットを開くには、Ctrl-Uppercase-i ショートカットを使用します。

次に、Chrome の場合はこちら、Firefox の場合はこちらで説明されているように、便利なツールがたくさんあります。

それらの1つはまさにあなたが必要としているもののようです. たとえば Chrome では、「Elements」と呼ばれる最初のタブにソース コードが表示されます (解釈された CSS と理由、マウスをホバーしたときに表示される要素、検索など)。

これは Web 開発者にとって不可欠なツールであるため、時間をかけてリンクされたドキュメントを読むことをお勧めします。そして、javascript や css を深く学ぶとすぐに、これらのツールの使用をやめることはできなくなります。

于 2012-08-17T14:42:02.283 に答える