Question

我正在使用JavaScript添加事件侦听器，当mouseOver事件发生时，该事件侦听器将使文本显示在HTML文档中的照片内部。我成功添加了事件，当我在图片上滚动时，我的文字出现在图片中。

我的问题是，尽管文本按计划出现在照片中，但一旦出现，它将更改文档的格式并将所有周围的元素推离文档。我希望能够在一个元素内添加文本而不会影响周围元素的布局。

我尝试使用innerHTML，appendChild和textContent来完成此任务。它们都成功地使我的文本出现在元素中，但是它们都具有将周围的元素推离它的相同问题。

<script>
document.getElementById("box1").addEventListener("mouseover", mouseOver);


function mouseOver() {
    var pictureContent = document.createElement("p");
    pictureContent.textContent = "China, officially the People's Republic of China, is a country in East Asia and the world's most populous country,";
    document.getElementById("box1").appendChild(pictureContent);
} 

</script>

Answer 1

您的问题更多是CSS问题，只需在使用position: absolute创建元素之后添加style.cssText和定位样式即可。

function mouseOver() {
    var pictureContent = document.createElement("p");
    pictureContent.textContent = "China, officially the People's Republic of China, is a country in East Asia and the world's most populous country,";
    pictureContent.style.cssText = "position:absolute"
    document.getElementById("box1").appendChild(pictureContent);
}

如何在不更改HTML文档布局的情况下添加子元素

1 个答案: