使用 JavaScript 清除 img src 属性

要清除 img src 属性:

  1. 使用 setAttribute() 方法将 img 的 src 属性设置为空字符串。
  2. 或者,隐藏 img 元素。
  3. 这是本文中示例的 HTML。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img id="img" src="https://jiyik.com/does-not-exist.jpg" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const img = document.getElementById('img');

// 👇️ set image src attribute to empty string
img.setAttribute('src', '');

// 👇️ or hide image
img.style.display = 'none';

我们使用 setAttribute 方法将图像元素的 src 属性设置为空字符串。

但是,如果我们这样做,img 仍会显示为已损坏。

或者,我们可以通过将其显示属性设置为无来隐藏 img。

我们使用 display 属性来隐藏 img 元素,但是我们可能需要使用 visibility 属性,具体取决于我们的用例。

当元素的 display 属性设置为 none 时,该元素将从 DOM 中删除并且对布局没有影响。 文档呈现为好像该元素不存在。

另一方面,当元素的可见性属性设置为隐藏时,它仍然会占用页面空间,但是该元素是不可见的(未绘制)。 它仍然会像往常一样影响页面上的布局。

这是一个将图像的可见性属性设置为隐藏的示例。

const img = document.getElementById('img');

img.style.visibility = 'hidden';

当 img 的 visibility 设置为 hidden 时,它是不可见的,但它仍然占用页面上的空间。

如果将 img 的 display 属性设置为 none,则该元素将从 DOM 中删除,其他元素占用其空间。