Javascript 如何在单击按钮时更改背景图像？_Javascript_Html_Css_Background Image

Javascript 如何在单击按钮时更改背景图像？

javascript html css

Javascript 如何在单击按钮时更改背景图像？,javascript,html,css,background-image,Javascript,Html,Css,Background Image,只想点击按钮，让桌面上的图像显示为背景。我正在使用Tryit编辑器v3.6 我尝试了各种包含更多/更少封闭文件夹的文件路径，尝试了“，”，/，\syntax…我只是知道的不够 <!DOCTYPE html> <html> <body> <button onclick="myFunction()">change background</button> <script> function myF

只想点击按钮，让桌面上的图像显示为背景。我正在使用Tryit编辑器v3.6

我尝试了各种包含更多/更少封闭文件夹的文件路径，尝试了“，”，/，\syntax…我只是知道的不够

<!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>

我想你使用的是w3schools的TryIt编辑器

在这种情况下，由于浏览器安全策略是一种高级topi，您的文件无法从文件系统访问。您可能在尝试上述操作时在控制台中看到过这种错误

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

我建议使用谷歌上提供的图像URL，而不是文件系统上的图像

如果您使用类似的工具，它将正常工作。

尝试此方法，请注意，如果您使用的是在线编辑器，则无法使用本地图像

<!DOCTYPE html>
<html>
<style>
  .background {
    background: black;
    height: 100px;
    width: 100px;
    color: white;
  }
</style>
<body>

<div id="background" class="background">Background</div>

<button onclick="myFunction()">change background</button>
</body>
<script>
    function myFunction() {
      document.getElementById('background').style.cssText = "background-image: url('http://images5.fanpop.com/image/photos/29800000/Blue-Rose-roses-29859433-449-300.jpg');"
    }
</script>
</html>


.背景{
背景：黑色；
高度：100px；
宽度：100px；
颜色：白色；
}
背景
改变背景
函数myFunction（）{
document.getElementById（'background'）.style.cssText=“背景图像：url（'http://images5.fanpop.com/image/photos/29800000/Blue-Rose-roses-29859433-449-300.jpg');"
}

很可能是您的路径不正确。请打开浏览器的开发工具并检查错误。如果这是浏览器内编辑器（我认为是Tryit），您可能无法在本地计算机上使用图像执行此操作。您可以改为尝试网站上的图像（如谷歌徽标）.ahhh..是的，Michael，谢谢！@Randall我相信是的，是的。我不确定最佳做法是什么，但您可以在脚本/html文件的根目录中创建一个图像目录，并确保每当脚本/html文件出现时都上载图像（这是一般性建议，不是特定于Tryit编辑器）.好的，但在我的例子中，会有数百个图像文件（它们是祖先迁移路径的映射），所以我可能应该将它们加载到其他地方，并以与您建议的google徽标相同的方式访问它们？

<!DOCTYPE html>
<html>
<style>
  .background {
    background: black;
    height: 100px;
    width: 100px;
    color: white;
  }
</style>
<body>

<div id="background" class="background">Background</div>

<button onclick="myFunction()">change background</button>
</body>
<script>
    function myFunction() {
      document.getElementById('background').style.cssText = "background-image: url('http://images5.fanpop.com/image/photos/29800000/Blue-Rose-roses-29859433-449-300.jpg');"
    }
</script>
</html>