Question

我仅在页面完全加载后才尝试显示span标签，span内容是通过不同的scrpt生成的，并且我想防止在加载时显示闪烁，所以我尝试了以下代码来显示仅在页面完全加载并且该其他脚本正确生成了内容后才进行标记：

<span id="ETOButton" style="display:none;" onload="LoadETOButton()">hello</span>

<script>
function LoadETOButton(){
	document.getElementById("ETOButton").style.display="inline block";
}
</script>

我在做什么错了？

编辑：跨度在页面加载后正确显示，但这产生了一个不同的问题，现在跨度位于应包含该跨度的div之外，可能正在对其包装器（Wrodpress）进行检查决定宽度的内容。

Answer 1

您当前正在做的事情是在调用该函数之前等待跨度完成加载。

您需要做的是在窗口中添加一个事件侦听器，该事件侦听器将在页面加载完成后被调用。

您也有一个带有“内联代码”的错字，应该是“内联代码”。

function LoadETOButton() {
  document.getElementById("ETOButton").style.display = "block";
}

window.addEventListener("load", LoadETOButton);

<span id="ETOButton" style="display:none;">hello</span>

Answer 2

it是inline-block而不是inline block
您需要调用函数LoadETOButton来进行CSS更改。

<span id="ETOButton" style="display:none;" onload="LoadETOButton()">hello</span>

<script>
function LoadETOButton(){
	document.getElementById("ETOButton").style.display="inline-block";
}

LoadETOButton();
</script>

Answer 3

如果您正在使用JQuery库，请使用文档准备功能

$(document).ready(function(){
$("#ETOButton").show(); 
});

或

$(document).ready(function(){
    $('#ETOButton').css('display', 'block');
    });

如果您想要纯JavaScript的解决方案，请添加加载事件监听器

function YourMethodName() {

  document.getElementById("ETOButton").style.display = "block";
}

window.addEventListener("load", YourMethodName)

Answer 4

为此，您可以使用本机js：

getCurrentUser()

或jquery：

<script>
   window.onload = function(){
     document.getElementById("ETOButton").style.display="block";
   }
</script>

Answer 5

使用此代码完成您的工作：-

function LoadETOButton() {
    document.getElementById("ETOButton").style.display = "block";
                          }

                           window.addEventListener("load", LoadETOButton);
                           <span id="ETOButton" style="display:none;">hello</span>

页面加载后如何显示跨度标签

5 个答案: