Question

我在主页的div中有一些文本，我希望它应该以浅背景显示（不透明度较低），div的宽度应为50％，并在页面加载后2秒后加载。我尝试使用javascript但它不起作用。在我的css文件“transition：width 2s;”

var slider = document.getElementById("splasher");

function splasher(){
slider.style.width="50%";
}

我把onload放在了

的div中

onload ="splasher();"

对此的任何帮助

Answer 1

您需要以下内容。最初我们等待DOM加载。然后我们为splasher设置超时。

document.addEventListener("DOMContentLoaded", function(){
    var slider = document.getElementById("splasher");
  
    function splasher(){
        slider.style.width="50%";
        slider.style.opacity = 0.5;
        slider.style.display = 'block';
    }
  
    setTimeout(splasher, 2000);
})

<h4>Slider Demo</h4>
<div id="splasher" style="display:none;">Slider</div>

Answer 2

您的滑块可能尚未渲染。放入onload内部。

<body onload="loaded()">

function loaded() {
 var slider = document.getElementById("splasher");

 function splasher(){
   slider.style.width="50%";
 }
}

Answer 3

您需要确保在加载元素之前不要运行var slider=...行。

主页上的onload事件

3 个答案: