如何在javascript中改变div背景图片？_html/css

javascript div背景图片

div如下：

回复讨论(解决方案)

测试了一下，LZ的代码很好用啊。
测试的时候DIV本没有图片。鼠标移动到上面就显示了。
没什么问题

背景图片的 url 正确不？

div如下：

登录后复制

$(function(){
  $("div").onmouseover(function(){
    $(this).css("background-image","img/yygk1.png")
  })
})
我比较习惯用JQuery 写,图片路径要正确,在同一级目录下可以直接写文件夹的名称,上一级就得用../

div如下：

不需要定义，LZ写的URL正确
又测试了一次，可以正确执行。

<div onmouseover="changeImg(this)" style="background-image:url(/xi.jpg);">	asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas</div><script type="text/javascript">function changeImg(obj){   obj.style.backgroundImage = "url(img/1.png)";   //obj.style.backgroundImg = "url(img/yygk1.png)";   //obj.style.background = "url(img/yygk1.png)";}</script>

登录后复制

div如下：

javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的，当鼠标移动到div上的时，期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了，这是怎么回事呢？

我也测了一下，不过要先将<script>中的2个<br>标签改到<body>标签中才可行，否则会报js异常。如下： <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><div onmouseover="changeImg(this)" style="background-image:url(2.jpg); width:600px; height:500px;"> asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas</div><br><script type="text/javascript">function changeImg(obj){ obj.style.backgroundImage = "url(2.png)"; //obj.style.backgroundImg = "url(img/yygk1.png)"; //obj.style.background = "url(img/yygk1.png)";}</script></pre>

登录后复制

</div> <br /> <br /> 不需要定义，LZ写的URL正确 <br /> 又测试了一次，可以正确执行。 <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><div onmouseover="changeImg(this)" style="background-image:url(/xi.jpg);"> asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas</div><script type="text/javascript">function changeImg(obj){ obj.style.backgroundImage = "url(img/1.png)"; //obj.style.backgroundImg = "url(img/yygk1.png)"; //obj.style.background = "url(img/yygk1.png)";}</script></pre>

登录后复制

</div> <br /> <br /> div如下： <br /> <div onmouseover="changeImg(this)"> <br /> <br /> javascript方法: <br /> function changeImg(obj){ <br /> obj.style.backgroundImage = "url(img/yygk1.png)"; <br /> //obj.style.backgroundImg = "url(img/yygk1.png)"; <br /> //obj.style.background = "url(img/yygk1.png)"; <br /> } <br /> <br /> div原本是有背景图片的，当鼠标移动到div上的时，期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了，这是怎么回事呢？ <br /> <br /> 我也测了一下，不过要先将<script>中的2个<br>标签改到<body>标签中才可行，否则会报js异常。如下： <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><div onmouseover="changeImg(this)" style="background-image:url(2.jpg);"> asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas</div><script type="text/javascript">function changeImg(obj){ obj.style.backgroundImage = "url(2.png)"; //obj.style.backgroundImg = "url(img/yygk1.png)"; //obj.style.background = "url(img/yygk1.png)";}</script><br><br></pre>

登录后复制

</div> <br /> <br /> 我也测了一下，不过要先将<script>中的2个<br>标签放到<script>标签之外才可行，否则会报js异常。如下： <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"></pre>

登录后复制

</div> <br /> <div onmouseover="changeImg(this)" style="background-image:url(2.jpg);"> <br /> asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdkls <br /> jksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlks <br /> jdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjk <br /> sldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas <br /> <br /> <br /> <script type="text/javascript"> <br /> function changeImg(obj){ <br /> obj.style.backgroundImage = "url(img/yygk1.png)"; <br /> //obj.style.backgroundImg = "url(img/yygk1.png)"; <br /> //obj.style.background = "url(img/yygk1.png)"; <br /> } <br /> </script>