<div class="abc"></div>
如果 div 標簽之間沒有任何內容，則我需要洗掉此 div，這意味著 div 為空。
我正在像這樣使用 CSS
div.abc:empty{display:none;}
但是如果我使用這種方法，我會遇到一個問題。如果 div 之間有一個空格，like<div> </div> :empty不起作用。
div.abc { border: 1px solid red; height:50px; }
div.abc:empty{display:none;}<div class="abc"></div>
<hr/>
<div class="abc"> </div>uj5u.com熱心網友回復：
截至 2021 年 11 月，沒有 JavaScript 是不可能的。CSS 中沒有修剪（但在FireFox 中除外
請注意，此示例還將隱藏具有偽類內容的 div
document.querySelectorAll(".abc")
.forEach(div => div.hidden = div.textContent.trim() === "")
// alternative if you want to use a class:
// div.classList.toggle("hide",div.textContent.trim() === "")div.abc { border: 1px solid red; height:50px; }
div.pscontent:after { content: "Also will be hidden"}
div.abc:empty{display:none;}<div class="abc"></div>
<hr/>
<div class="abc"> </div>
<hr/>
<div class="abc pscontent"></div>要處理偽類內容，我們可以這樣做：
const hideEmpty = (sel, testPseudoContent) => {
const elems = document.querySelectorAll(sel)
elems.forEach((elem,i) => {
const text = [elem.textContent.trim()]
if (testPseudoContent) {
["before", "after"].forEach(ps => text.push(window.getComputedStyle(elem, ps).getPropertyValue("content").trim()))
}
elem.hidden = text.join('').length === 0;
})
};
hideEmpty('.abc')
hideEmpty('.def.pscontent', true)div.abc {
border: 1px solid red;
height: 50px;
}
div.def {
border: 1px solid green;
height: 50px;
}
div.pscontent:after {
content: "Don't hide this"
}<div id="div1" class="abc"></div>
<hr/>
<div id="div2" class="abc"> </div>
<hr/>
<div id="div5" class="def pscontent"></div>uj5u.com熱心網友回復：
您的代碼確實可以作業，但在不久的將來，因為規范已更改以:empty考慮空格
注意：在 Selectors 的 Level 2 和 Level 3 中，:empty 不匹配僅包含空格的元素。這被更改為 - 給定的空白在 HTML 中大部分是可折疊的，因此用于源代碼格式化，特別是因為省略了結束標記的元素可能會將這些空白吸收到它們的 DOM 文本內容中 - 作者認為的元素正如他們所期望的那樣，這個選擇器可以選擇空。參考
在此之前，有一個 Firefox 解決方案使用 -moz-only-whitespace
div.abc { border: 1px solid red; height:50px; }
div.abc:-moz-only-whitespace {display:none;}
div.abc:empty {display:none;}<div class="abc"></div>
<hr/>
<div class="abc"> </div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344722.html