0

JavaScript を使用して新しい HTML ドキュメントを作成したいと考えています。本文に div (表示: インライン) を作成し、そこに ap タグを作成します。次に、p タグ (innerHTML) に文字列 (titleTagString) を入れます。今、知りたいのは、div のオフセット幅です。Chrome コンソールは 0 と表示されます...どこが失敗したのでしょうか? ありがとう！

function titleTagTester(titleTagString) {
  //Create new document
  newDoc = document.implementation.createHTMLDocument('titleTagTester.html');
  //Create var body from document
  var body = newDoc.getElementsByTagName('body');
  
  //Create div element with style and add to body of document  
  newDoc.body.innerHTML += '<div style="width:600px" display="inline" id="divId"></div>';
  
  //Create p element with style and add to div of body of document  
  newDoc.getElementById('divId').innerHTML += '<p style="color:#1a0dab" "font-family:arial" font-size:18px;">' + titleTagString + '</p>';
  
  //getwidth of div
  return newDoc.getElementById("divId").offsetWidth;
}

4

1 に答える 1

1

スクリプトが同じドキュメント DOM を操作するように、スクリプトを埋め込んだ HTML ドキュメントを作成しました。

<!DOCTYPE html>
<html>
<head>
<title>temp</title>
</head>
<body>
<h1>Domething</h1>
</body>
<script type="text/javascript">
function titleTagTester(titleTagString) {
  var body = document.getElementsByTagName('body');
  
  //Create div element with style and add to body of document  
  document.body.innerHTML += '<div style="width:600px" display="inline" id="divId"></div>';
  
  //Create p element with style and add to div of body of document  
  document.getElementById('divId').innerHTML += '<p style="color:#1a0dab" "font-family:arial" font-size:18px;">' + titleTagString + '</p>';
  
  //getwidth of div
  return document.getElementById("divId").offsetWidth;
}
console.log(titleTagTester('temp'))
</script>
</html>

この Web ドキュメントの場合、コンソールには600と表示されます。新しいドキュメントを作成し、そのドキュメントから必要なオフセットを取得することが意図されているため、これはあなたの質問に対する適切な回答ではありません。ただし、createHTMLDocumentあなたの場合は機能していないようで、 の値を出力することで検出されます。newDoc.readyStateこれは初期化されていないことが判明し、これが offsetwidth 値を0. これを修正する 1 つの方法は、script タグ内で関数を直接呼び出すのではなく、onload イベント ハンドラーを使用して関数を呼び出すことです (例<body onload="titleTagTester('tempString')">)。

于 2016-12-23T17:52:33.267 に答える