怎么让预览窗口的内容直接显示ID：ABC的内容：<div ID="ABC" onmousemove="showPreview(event, this)" onmouseout="hidePreview()"> <!-- 需要显示预览内容的DIV --> <p>预览内容</p> </div> <div id="preview" style="display:none; position:absolute;"> <!-- 预览浮窗 --> <p>预览内容</p> </div> <script> var previewElement = document.getElementById("preview"); function showPreview(event, element) { // 获取需要预览的内容 var previewContent = element.innerHTML; // 设置预览浮窗内容 previewElement.innerHTML = previewContent; // 设置预览浮窗位置 previewElement.style.left = event.clientX + "px"; previewElement.style.top = event.clientY + "px"; // 显示预览浮窗 previewElement.style.display = "block"; } function hidePreview() { // 隐藏预览浮窗 previewElement.style.display = "none"; } </script>

你可以在页面加载完成时，调用 showPreview 函数，并传递需要显示预览内容的 div 元素作为参数，例如：

<script>
window.onload = function() {
  var element = document.getElementById("ABC");
  showPreview(null, element);
}
</script>

这样，页面加载完成后，预览浮窗就会直接显示需要预览的内容。

相关问题

怎么让预览窗口的内容直接显示ID：ABC的内容，并适用IE和火狐：<div ID="ABC" onmousemove="showPreview(event, this)" onmouseout="hidePreview()"> <!-- 需要显示预览内容的DIV --> <p>预览内容</p> </div> <div id="preview" style="display:none; position:absolute;"> <!-- 预览浮窗 --> <p>预览内容</p> </div> <script> var previewElement = document.getElementById("preview"); function showPreview(event, element) { // 获取需要预览的内容 var previewContent = element.innerHTML; // 设置预览浮窗内容 previewElement.innerHTML = previewContent; // 设置预览浮窗位置 previewElement.style.left = event.clientX + "px"; previewElement.style.top = event.clientY + "px"; // 显示预览浮窗 previewElement.style.display = "block"; } function hidePreview() { // 隐藏预览浮窗 previewElement.style.display = "none"; } </script>

你可以在 showPreview 函数中添加对不同浏览器的兼容处理，例如：

function showPreview(event, element) {
  // 获取需要预览的内容
  var previewContent = element.innerHTML;
  // 设置预览浮窗内容
  previewElement.innerHTML = previewContent;
  // 设置预览浮窗位置
  var left = event.clientX + "px";
  var top = event.clientY + "px";
  if (document.documentElement && document.documentElement.scrollTop) {
    left = event.clientX + document.documentElement.scrollLeft + "px";
    top = event.clientY + document.documentElement.scrollTop + "px";
  } else if (document.body) {
    left = event.clientX + document.body.scrollLeft + "px";
    top = event.clientY + document.body.scrollTop + "px";
  }
  previewElement.style.left = left;
  previewElement.style.top = top;
  // 显示预览浮窗
  previewElement.style.display = "block";
}

这样，无论是在 IE 还是 Firefox 浏览器中，都可以正确地显示预览浮窗，并根据滚动条的位置设置预览浮窗的位置。

帮我优化以下代码<div ID="ABC" onmousemove="showPreview(event, this)" onmouseout="hidePreview()"> <!-- 需要显示预览内容的DIV --> <p>预览内容123123</p> </div> <div id="preview" style="display:none; position:absolute;"> <!-- 预览浮窗 --> </div> <script> function showPreview(event, element) { // 获取需要预览的内容 var previewContent = element.innerHTML; // 设置预览浮窗内容 previewElement.innerHTML = previewContent; // 设置预览浮窗位置 var left = event.clientX + "px"; var top = event.clientY + "px"; if (document.documentElement && document.documentElement.scrollTop) { left = event.clientX + document.documentElement.scrollLeft + "px"; top = event.clientY + document.documentElement.scrollTop + "px"; } else if (document.body) { left = event.clientX + document.body.scrollLeft + "px"; top = event.clientY + document.body.scrollTop + "px"; } previewElement.style.left = left; previewElement.style.top = top; // 显示预览浮窗 previewElement.style.display = "block"; } </script>

你可以将预览浮窗的 HTML 内容也放在需要显示预览内容的 div 元素中，这样就不需要在 JavaScript 代码中再次设置预览浮窗内容了。另外，为了提高代码的可读性和可维护性，建议使用事件监听器来绑定事件，而不是在 HTML 中直接写事件处理函数。

优化后的代码如下所示：

HTML 代码：

<div id="ABC">
  <!-- 需要显示预览内容的 DIV -->
  <p>预览内容123123</p>
  <div id="preview" style="display:none; position:absolute;">
    <!-- 预览浮窗 -->
    <p>预览内容123123</p>
  </div>
</div>

JavaScript 代码：

var previewElement = document.getElementById("preview");
var abcElement = document.getElementById("ABC");

abcElement.addEventListener("mousemove", function(event) {
  // 设置预览浮窗位置
  var left = event.clientX + "px";
  var top = event.clientY + "px";
  if (document.documentElement && document.documentElement.scrollTop) {
    left = event.clientX + document.documentElement.scrollLeft + "px";
    top = event.clientY + document.documentElement.scrollTop + "px";
  } else if (document.body) {
    left = event.clientX + document.body.scrollLeft + "px";
    top = event.clientY + document.body.scrollTop + "px";
  }
  previewElement.style.left = left;
  previewElement.style.top = top;
  // 显示预览浮窗
  previewElement.style.display = "block";
});

abcElement.addEventListener("mouseout", function() {
  // 隐藏预览浮窗
  previewElement.style.display = "none";
});

这样，代码更加简洁、易读，并且没有重复的代码。