javascript - 如何在单击按钮时更改背景图像?

标签 javascript html css background-image

只想单击按钮,让我桌面上的图像显示为背景。我正在使用 Tryit Editor v3.6

我尝试了各种包含更多/更少封闭文件夹的文件路径,尝试搞乱 ",',/,\语法......我只是不够了解

<!DOCTYPE html>
<html>
  <body>
    <button onclick="myFunction()">change background</button>

    <script>
      function myFunction() {
        document.body.style.backgroundImage ="/Users/mcgeheer/Desktop/testpic.png"
      }
    </script>
  </body>
</html>

我也试过这个:

document.body.style.backgroundImage ="url( '/Users/mcgeheer/Desktop/testpic.png')";

最佳答案

我认为您正在使用 w3schools 的 TryIt 编辑器。

在这种情况下,由于浏览器安全策略(这是一个高级话题),您的文件无法从您的文件系统访问。在尝试上述操作时,您可能已经在控制台中看到了此类错误。

不允许加载本地资源:file:////Users/mcgeheer/Desktop/testpic.png

我建议使用 google 上可用的图片 URL,而不是文件系统上的图片。像一个例子。 https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg

如果你使用这样的东西它会正常工作。

关于javascript - 如何在单击按钮时更改背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57082747/

相关文章:

javascript - 从 onchange 方法调用后,React 函数不返回组件

javascript - 如何将可调整大小的 div 宽度读取到变量中 - Angular 4

javascript - 如何使用setInterval放大图像

c# - 释放 JavaScript 的 ActiveXObject()?

javascript - 简单的 javascript 条件不起作用

javascript - 计算对象中 X 是第一个关键字母的所有值

javascript - 如何根据下拉菜单用户选择显示内容

html - Firefox 中的字体问题(锐边)

css - :global (colon global) do? 是什么

html - 用于单独的兄弟元素组的 CSS 选择器