使用 JavaScript 清除 Img src 属性

作者

使用 JavaScript 清除 Img src 属性

Clear Img src attribute using JavaScript

要清除图像 src 属性：

  1. 使用setAttribute()方法将图像的src属性设置为空字符串。
  2. 或者，隐藏图像元素。

以下是本文示例的 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 中移除，而其他元素将占用其空间。

–

发表评论