我碰巧在某個 HTML 頁面中有一個帶有串列的風格化影像。
如果影像無法顯示，我想要一個普通的 HTML 串列而不是它（與 alt 文本類似，但帶有 HTML 標簽而不僅僅是文本）。
有沒有最好的方法來做到這一點？（比如 CSS 規則之類的？）
謝謝
uj5u.com熱心網友回復：
有一種標準方法可以在不求助于 JavaScript 的情況下做到這一點。使用 object 元素而不是 img 元素。如果影像無法顯示，則使用物件元素的內容。所以：
<p>When the image displays:</p>
<object data="https://via.placeholder.com/50" style="height:50px">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</object>
<p>When the image doesn't display:</p>
<object data="https://error.placeholder.com/50" style="height:50px">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</object>uj5u.com熱心網友回復：
您可以偵聽errorevent，它在無法加載資源時觸發：
function badImage(imageElement){
imageElement.outerHTML = "This image can't be shown"
}<img src="https://.com" onerror="badImage(this)">uj5u.com熱心網友回復：
該串列通常與影像重疊。如果影像加載錯誤，它將變得不可見。
不是 100% 確定它是否會起作用。
css：
img {
z-index: 1;
position: absolute;
top:0px;
left:0px;
}
ul {
/*z-index: 0;*/
position: absolute;
top:0px;
left:0px;
}
html：
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<img src="image.jpg" onerror="document.querySelector('img').style.visibility = "hidden"">
您可以隨意設定串列樣式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361710.html
標籤：javascript html css