請解釋代碼樣式可見性的含義

Question

美好的一天！ 請問以下代碼是什么意思，尤其是有關（dialog.style.visibility ==“ visible”）的部分？ “ hidden”：“ visible”;

dialog = document.getElementById("divName");
dialog.style.visibility = (dialog.style.visibility == "visible") ? "hidden" : "visible";

Answer 1

如果對話框當前可見，則將其隱藏。 相反，如果當前不可見，它將顯示它。

這稱為內聯if語句： http : //noobflash.com/javascript-inline-if-statement/

Answer 2

此代碼將切換ID為divName的HTML元素的CSS可見性屬性。

代碼(dialog.style.visibility == "visible") ? "hidden" : "visible"; (dialog.style.visibility == "visible") ? "hidden" : "visible"; 使用條件運算符 。

在您的上下文中，與使用以下命令具有相同的效果：

if (dialog.style.visibility == "visible") {
    dialog.style.visibility = "hidden";
}
else {
     dialog.style.visibility = "visible;
}

Answer 3

CSS可見性

我對這種樣式的理解是，您可以隱藏某些東西，但是如果顯示的話，它仍然會占用其他空間。

在哪里display: none本質上display: none像position: absoulute那樣從文檔流中“刪除”元素。

閱讀有關CSS可見性樣式的更多信息

三元運算符

var result = expression ? thisIfTrue : elseThisIfFalse

dialog = document.getElementById("divName");
dialog.style.visibility = 
                  (dialog.style.visibility == "visible") ? "hidden" : "visible";

上面的代碼使用三元語句：

// If visibility is equal to 'visible' visible
dialog.style.visibility == "visible" 
            ? "hidden"    // then set it to hidden, 
            : "visible";  // otherwise set it to visible

在此處閱讀有關javascript的更多信息

Answer 4

可見性屬性設置或返回元素是否應可見。 可見性屬性允許顯示或隱藏元素。 它類似於display屬性。 但是，不同之處在於，如果設置display：none，則它將隱藏整個元素，而visible：hidden表示該元素的內容將不可見，但該元素將保持其原始位置和大小。