0

我想用 javascript 创建一个新的 html 文档。我想在正文中创建一个 div（显示：内联）并在其中创建 ap 标签。然后我在 p 标签（innerHTML）中放入一个字符串（titleTagString）。现在我想知道，这是 div 的 offsetwidth。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

我制作了一个 HTML 文档，其中嵌入了脚本，以便该脚本操作相同的文档 DOM：

<!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。纠正此问题的一种方法是使用 onload 事件处理程序调用该函数，而不是直接在脚本标记（例如<body onload="titleTagTester('tempString')">）中调用该函数。

于 2016-12-23T17:52:33.267 回答