使用 JavaScript 清除 Img src 属性
Clear Img src attribute using JavaScript
要清除图像 src 属性:
- 使用
setAttribute()
方法将图像的src
属性设置为空字符串。 - 或者,隐藏图像元素。
以下是本文示例的 HTML。
索引.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <img id="img" src="https://example.com/does-not-exist.jpg" alt="banner" /> <script src="index.js"></script> </body> </html>
这是相关的 JavaScript 代码。
索引.js
const img = document.getElementById('img'); // 👇️ set image src attribute to empty string img.setAttribute('src', ''); // 👇️ or hide image img.style.display = 'none';
我们使用
setAttribute
方法将src
图像元素的属性设置为空字符串。
但是,如果您这样做,图像仍显示为已损坏。
display
或者,您可以通过将其属性
设置为 来隐藏图像none
。
我们使用display
属性来隐藏图像元素,但是您可能需要使用
visibility
属性,具体取决于您的用例。
当元素的
display
属性设置为 时none
,该元素将从 DOM 中移除并且对布局没有影响。文档呈现为好像该元素不存在一样。另一方面,当元素的visibility
属性设置为 时hidden
,它仍会占用页面空间,但该元素是不可见的(未绘制)。它仍然会像往常一样影响您页面上的布局。
这是将图像的visibility
属性设置为 的示例hidden
。
索引.js
const img = document.getElementById('img'); img.style.visibility = 'hidden';
当图像的visibility
设置为 时hidden
,它是不可见的,但它仍然占用页面空间。
如果将图像的display
属性设置为none
,则该元素将从 DOM 中移除,而其他元素将占用其空间。