在Javascript中隱藏和顯示各自樣式的元素

-1

我想使用javascript隱藏元素display: none，然後再次顯示它。但是，如果我隱藏默認的<li>元素，然後嘗試使用display: block顯示它，則不再使用之前由默認的display: list-item屬性設置的樣式。在Javascript中隱藏和顯示各自樣式的元素

這同樣適用於其他樣式，以及：如果一個元件具有display: inline-block屬性，而另一個具有display: list-item，隱藏和與JavaScript然後表示它們兩者將具有display: block集，這將具有在定型的效果後要素。

如何隱藏和顯示元素，以便在用javascript顯示它們時顯示值被「記住」？

我的建議：也許是可能加載從使用JavaScript的css文件的價值？如果顯示值沒有特別設置，我們可以安全地使用display: block來顯示元素。這將解決問題。

請不要在這裏建議jQuery。我正在開發我自己的框架，並學習如何自己做到這一點，因此具有附加價值。

來源

2013-10-20 Onion

你是如何隱藏和顯示元件？我們展示的代碼 – zzlalani

display屬性只能有一個值，所以如果您將其設置爲none，然後想要將其恢復到其以前的值，唯一的方法是記住之前的值，以便您可以恢復它。

如果需要，您可以將先前屬性存儲爲對象本身的屬性。

function hide(obj) { 
    if (obj.style.display != "none") { 
     // save original display value 
     // if we are not already hidden 
     obj.priorDisplay = obj.style.display; 
     obj.style.display = "none"; 
    } 
} 

function show(obj) { 
    var val = "block"; 
    if (obj.priorDisplay) { 
     val = obj.priorDisplay; 
    } 
    obj.style.display = val; 
}

來源

2013-10-20 05:31:33 jfriend00

是的，我在想這件事，但我仍然認爲，必須有另一種方式。我的建議呢？ – Onion

@doitmyway - 我不明白您的建議或怎麼會比我所提供的代碼更簡單。 – jfriend00

我想過從文檔的CSS樣式中加載顯示屬性。 – Onion

你可以試試這個，

var oldDisplay = document.getElementById("ELEMENT_ID").style.display; 

function callHide(id) { 
    var element= document.getElementById(id); 
    element.style.display = "none"; 
} 

function callShow(id) { 
    var element= document.getElementById(id); 
    if (oldDisplay == "none") { 
     element.style.display = "block"; 
    } else { 
     element.style.display = oldDisplay; 
    } 
}

您的建議：

我的建議：也許是可能加載從使用JavaScript的CSS文件的價值？如果顯示值不是專門設置爲，我們可以安全地使用display：block來顯示元素。這樣可以解決問題。

我不認爲這將是容易加載的樣式或者通過讀取.css文件或分析，或如果有任何其他可能的解決方案

我寧願建議你剛剛保存display值變成一個變量，並在需要顯示它時使用它，它將消耗更少的代碼行，更少的客戶端系統內存和進程，並且它也會減少用戶瀏覽器的負擔

來源

2013-10-20 05:40:10 zzlalani

在Javascript中隱藏和顯示各自樣式的元素

回答

相關問題