2016-12-23 1 views
0

javascriptで新しいhtmlドキュメントを作成したいと思います。本文にはdiv(display:inline)を作成し、そこにpタグを作成します。次に、pタグ(innerHTML)にString(titleTagString)を挿入します。今私は知っている、それはdivが持っているoffsetwidthです。クロムコンソールは0と答えています... どこが故障ですか? ありがとう!Offsetwidth by new HTML Document

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; 
 
}

答えて

1

私はそれは、このようなスクリプトは、同じ文書のDOM操作している内に埋め込まれたスクリプトを含むHTML文書を作っ:このWeb用

<!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>

をドキュメント、コンソールには 600と書かれています。新しい文書を作成し、その文書から必要なオフセットを得ることが目的であるため、これはあなたの質問に対する良い答えではありません。しかし、createHTMLDocumentが正常に機能していないように見えて、newDoc.readyStateという値が出力され、これが初期化されていないことが判明し、offsetwidthの値が0になっています。これを修正する1つの方法は、スクリプトタグ内で直接関数を呼び出すのではなく、onloadイベントハンドラを使用して関数を呼び出すことです(例:<body onload="titleTagTester('tempString')">)。

関連する問題