製作DIV在CSS和JavaScript

看不見我已經設法在JavaScript中的DIV標籤隱形通過設置顯示爲none和能見度爲隱藏。它也可以通過此類實現：製作DIV在CSS和JavaScript

.invisible { 
    display: none; 
    visibility: hidden; 
}

顯示none將確保DIV框爲空，並且可見性隱藏將確保它不可見。這種方法的問題是，當我有滾動的DIV或文字區域與溢出的內容，當你設置顯示：沒有，一些瀏覽器會忘記這些元素的滾動位置。有沒有更好的方式使DIV隱形而不使用顯示屬性？我寧願不訴諸使用JavaScript來記錄滾動位置，如果可能的話。

編輯：

我管理你的幫助來解決這個問題，我申請了以下內容：

.invisible { 
    visibility: hidden; 
    position: absolute; 
    top: -9999px; 
} 

.visible { 
    visibility: visible; 
    position: static; 
}

我試過左：-9999px，但這種擴展IE中的垂直滾動條..我還包裹着我的textarea在另一個DIV和應用的顯示/隱藏樣式，因爲textarea的，否則失去其滾動位置。我在iPhone上的Chrome，Firefox，IE和Safari中測試了這一點。只需要注意一下，纏繞textarea的DIV在FF中似乎沒有幫助，滾動條仍然重置。但可滾動的DIV現在很好。謝謝你的幫助！

來源

2011-02-25 Aram Kocharyan

只是一個猜測，但會把它放在一個容器div和渲染**那** div看不見嗎？既然這是一個猜測，我不會提供它作爲答案。 – Dancrumb 2011-02-25 03:24:13

嗯，我以爲我的解決方案取得了成功，但現在我發現android瀏覽器仍然向上滾動...：/ – Karussell 2012-02-07 10:50:45

啊，我沒有android ... – 2012-02-07 15:19:38

這可能會工作：

.invisible { 
    position: absolute; 
    left: -9999px; 
}

編輯：我想看看在HTML5樣板代碼的common helpers探索使事情消失的其他方式。

來源

2011-02-25 03:25:59

您可能想要做出這樣的否定，所以頁面的水平滾動條不會踢入。 – icktoofay 2011-02-25 03:27:41

當然可以。謝謝！ – 2011-02-25 03:30:12

，如果你想要的元素是無形的，但仍然呈現你可以只使用visibility:hidden。 display:none將完全移除它並導致您提到的滾動行爲。

來源

2011-02-25 03:24:46

'visibility：hidden'仍然會導致元素來佔用佈局中的空間。我猜這不是OP所要找的，因爲他對'display：none'滿意減去滾動條問題。 – 2011-02-25 03:43:38

是的，我知道可見度，但是如果你的DIV是一個塊，它仍然會佔用這個空間。 – 2011-02-25 03:56:07

對我來說這個工作。它不佔用太多的空間;） – Karussell 2012-02-04 21:05:10

您可以使用一個jQuery的hide（）方法。 $（'＃DivID'）。hide（）;或$（'。DivClass'）。hide（）;

來源

2011-02-25 03:25:00 Ali

其實我希望不要使用jquery，除非我必須這樣做，但是這樣會更容易一些，查看我寫的所有代碼:) – 2011-02-25 03:53:35

佈局明智，顯示：沒有把它完全從渲染樹和這個netherworld limbo。它沒有明確的尺寸或位置了。

如果你需要一些佔位符滾動位置，我建議使用一個佔位符元素。一些零高度的DIV或甚至可能會工作。

來源

2011-02-25 03:25:56 jpsimons

我寧願使用固定的高度和寬度（高度：0;寬度：0;）。不要忘記消除邊界，填充和邊距。

來源

2016-06-16 18:26:58 Macarrao

您可以使用jQuery來獲得解決方案。如果你想完全隱藏/顯示div，然後ü可以使用：

$('#my_element').show() 
$('#my_element').hide()

如果你想你的DIV成爲無形的，它在頁面仍然存在，那麼你可以使用有效的絕招：

$('#my_element').css('opacity', '0.0'); // invisible Maximum 
$('#my_element').css('opacity', '1.0'); // visible maximum

來源

2017-01-25 05:10:45

製作DIV在CSS和JavaScript

回答

相關問題