使用 JAVASCRIPT 更改 HTML 中 div 的背景

Question

我正在尝试更改 DIV 的背景，我认为我的代码是正确的，但似乎不是。 我认为错误出现在 URL 参数上，因为没有参数 function 可以工作。

这是我的代码：

<script language="JavaScript">
        function imagen(col){
        document.write(col);
        var elem = document.getElementById("fondo");
        elem.style.backgroundImage = url('col');

        }
    </script>

<div class="grid-block" id="fondo" width: 100%; height: 100vh;">
        <div class="heading">
        <a href="pagina1.html" onMouseOver="imagen(uploads/banner-01.jpg)" >Rojo</a>
        </div>
    </div>

谢谢你。

Answer 1

imagen()的参数需要用引号引起来。 否则它将被评估为表达式，并且您将收到语法错误。

您需要使用字符串连接将参数与url()结合起来。

不要在加载 DOM 后运行的函数中使用document.write() 。 它将清除 DOM - 请参阅为什么 document.write 被认为是“不好的做法”？ 使用console.log()调试 output。

 function imagen(col) { console.log(col); var elem = document.getElementById("fondo"); elem.style.backgroundImage = 'url(' + col + ')' }

 <div class="grid-block" id="fondo" width: 100%; height: 100vh; "> <div class="heading "> <a href="pagina1.html " onMouseOver="imagen('uploads/banner-01.jpg') " >Rojo</a> </div> </div>