在沒有jQuery的情況下在10秒後添加css類

-5

如何在沒有jquery的情況下10秒後添加一個css類？在沒有jQuery的情況下在10秒後添加css類

我希望它由JavaScript在我的HTML代碼

2014-03-24 niekotje

爲什麼你不想使用jQuery和你嘗試過什麼？ 'setTimeout（function（）{document.getElementById（'yourid'）。className ='newclass';}，10000）;'？ – putvande

我試過jquery，但jquery搞砸了我的其他代碼。 – niekotje

它可能在純JavaScript？ – niekotje

var elem = document.getElementById("div");//based on Fabrizio's comment declare it outside 
setTimeout(function(){ 
    elem.className = elem.className + " otherclass"; 
},10000);

來源

2014-03-24 13:42:16 Merlin

稍作改進就是緩存對元素的引用，由setTimeout（） – fcalderan

調用的函數外部可以在類本身中使用transition-delay。 http://stackoverflow.com/questions/22611084/add-css-class-after-10-seconds-without-jquery/22612003#22612003 –

setTimeout(function(){ 
    document.getElementById('yourid').className = 'newclass'; 
}, 10000);

來源

2014-03-24 13:43:04 putvande

如果元素已經有一個類，這將_replace_元素的類而不是_append_到它。如果這是可以接受的，那麼這將工作！ –

使用setTimeout：

setTimeout(function() { 
    // Fetch the node from the DOM: getElementById etc: 
    var el = document.querySelector('div.myClass'); 

    el.className += ' newClass'; 
}, 10 * 1000); // 1000 = 1 sec

來源

2014-03-24 13:43:25 andlrc

你可以選擇只切換或添加類名並給予一個過渡延遲新課程：http://codepen.io/anon/pen/vlneg/ 基本測試： HTML

 <p id="myid" class="yellow"> 
     yellow text 
      <span onclick='this.className = this.className + " red"';> 
        make it red in a sec ! 
      </span> 
     </p>

CSS

.yellow { 
    background:lime; 
    color:yellow; 
} 
.red { 
    transition:1s 1s; 
    color:red; 
}

因此，沒有過渡可見10S的延遲使得：transition:0s 10s;。

短手語法：http://www.w3.org/TR/css3-transitions/#transition-shorthand-property

來源

2014-03-24 14:18:39

在沒有jQuery的情況下在10秒後添加css類

回答

相關問題