如何在沒有jQuery的情況下切換元素可見性？

我正在爲eBay寫一個拍賣模板，希望eBay會允許它。顯然他們不是因爲jquery有像string.replace（）等東西。如何在沒有jQuery的情況下切換元素可見性？

代碼是非常基本的。

$(document).ready(function(){ 

    function changeImage(){ 
     if($("#coin1").css("display") == "none"){ 
      $("#coin1").fadeIn("slow"); 
     }else{ 
      $("#coin1").fadeOut("slow"); 
     } 
    }; 

    setInterval (changeImage, 5000); 
});

我基本上需要重寫它在普通的JavaScript ...

來源

2010-01-15 Jared

如果你生活中可以沒有淡化效果，它應該是非常簡單的：

function changeImage() { 
    var image = document.getElementById('coin1'); 
    image.style.display = (image.style.display == 'none') ? 'block' : 'none'; 
} 

setInterval(changeImage, 5000);

雖然衰落清涼所有這些，當我們不允許使用外部庫時，它確實使代碼變得更加複雜。基本上，你需要處理額外的定時器，以非常短的時間間隔觸發，改變每個回調中目標元素的不透明度。

如果您真的想要褪色，請參閱"Javascript Tutorial - Simple Fade Animation"。

來源

2010-01-15 18:04:10

謝謝！我有點想去淡化效果，雖然... – Jared 2010-01-15 18:05:24

易趣不允許腳本可以替換字符串修改高級設置 - 不，我不允許外部鏈接，但即使你直接粘貼到你的代碼，它不起作用。 – Jared 2010-01-15 18:07:41

我已經更新了關於褪色的更多信息，其中包括指向「普通」JavaScript中簡單實現的鏈接。 – 2010-01-15 18:12:42

最基本的衰落，而不是跨瀏覽器兼容（在Chrome中試試）：

<div id="x" style="background-color: yellow;"> 
    <a href="#" onclick="fade();">fade me out</a> 
</div> 

<script type="text/javascript"> 
    var val = 1.0; 
    function fade() 
    { 
     document.getElementById('x').style.opacity = val; 
     val -= 0.1; 

     if (val != 0) 
     { 
      setInterval(fade, 100); 
     } 
    } 
</script>

來源

2010-01-15 18:13:32 Langdon

你可以使用classList.toggle你的元素：

<style> 
    .hidden { display: none !important; } 
</style> 

<script> 
    function toggle() { 
    document.getElementById('elem').classList.toggle('hidden'); 
    } 
</script> 

<a href="#" onclick="toggle()">Toggle element</a> 

<p id="elem">lorem ipsum quid modo tralala</p>

來源

2017-07-17 07:58:04

我有問題與間隔的辦法。這是我想出的。

function showHide() { 
 
    var element = document.getElementById('hiddenDetails'); 
 
    element.classList.toggle("hidden"); 
 
}

.hidden { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<a href="#" onclick="showHide()">Get Details</a> 
 

 
<div id="hiddenDetails" class="hidden">What you want to show and hide</div>

來源

2017-09-28 15:31:49 phillipmaddox

如何在沒有jQuery的情況下切換元素可見性？

回答

相關問題