検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >JavaScriptでdiv背景画像を変更するにはどうすればよいですか? _html/css_WEB-ITnose

JavaScriptでdiv背景画像を変更するにはどうすればよいですか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 12:21:191116ブラウズ

javascript div背景图片


div如下：
6501f6ca163bee15a674f5d3b0943dae
16b28748ea4df4d9c2150843fecfba68
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,但实际运行结果是背景图片没了，这是怎么回事呢？

回复讨论(解决方案)

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

背景图片的 url 正确不？

div如下：
6501f6ca163bee15a674f5d3b0943dae
16b28748ea4df4d9c2150843fecfba68
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,但实际运行结果是背景图片没了，这是怎么回事呢？

你要保证背景图片路径正确才行



div如下：
6501f6ca163bee15a674f5d3b0943dae
16b28748ea4df4d9c2150843fecfba68
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,但实际运行结果是背景图片没了，这是怎么回事呢？

你要保证背景图片路径正确才行 这个url在哪里定义呢？我还以为这是个关键字呢，难道它只是个变量？ 

  
 $(function(){  
   $("div").onmouseover(function(){  
     $(this).css("background-image","img/yygk1.png")  
   })  
 })  
 我比较习惯用JQuery 写,图片路径要正确,在同一级目录下可以直接写文件夹的名称,上一级就得用../ 
 
  
  
 div如下：  
 6501f6ca163bee15a674f5d3b0943dae  
 16b28748ea4df4d9c2150843fecfba68  
 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,但实际运行结果是背景图片没了，这是怎么回事呢？  
  
 你要保证背景图片路径正确才行  
  
  
  
 div如下：  
 6501f6ca163bee15a674f5d3b0943dae  
 16b28748ea4df4d9c2150843fecfba68  
 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,但实际运行结果是背景图片没了，这是怎么回事呢？  
  
 你要保证背景图片路径正确才行 "url(img/yygk1.png)"括号中的路径是对的，这个"url"也得定义吗?还是说这是个关键字？ 
 
  不需要定义，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如下：  
 6501f6ca163bee15a674f5d3b0943dae  
 16b28748ea4df4d9c2150843fecfba68  
 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,但实际运行结果是背景图片没了，这是怎么回事呢？  
  
 你要保证背景图片路径正确才行  
  
  
  
 div如下：  
 6501f6ca163bee15a674f5d3b0943dae  
 16b28748ea4df4d9c2150843fecfba68  
 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,但实际运行结果是背景图片没了，这是怎么回事呢？  
  
 你要保证背景图片路径正确才行 "url(img/yygk1.png)"括号中的路径是对的，这个"url"也得定义吗?还是说这是个关键字？  
 不是的，晕死，你懂不懂CSS的基本知识啊，url(img/yygk1.png)，能去了解一下基本的知识么？ 
 
  div如下：  
 6501f6ca163bee15a674f5d3b0943dae  
 16b28748ea4df4d9c2150843fecfba68  
 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,但实际运行结果是背景图片没了，这是怎么回事呢？  
  
 我也测了一下，不过要先将3f1c4e4b6b16bbbd69b2ee476dc4f83a中的2个0c6dc11e160d3b678d68754cc175188a标签改到6c04bd5ca3fcae76e30b72ad730ca86d标签中才可行，否则会报js异常。如下：  
  
<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>
  
  
 不需要定义，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如下：  
 6501f6ca163bee15a674f5d3b0943dae  
 16b28748ea4df4d9c2150843fecfba68  
 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,但实际运行结果是背景图片没了，这是怎么回事呢？  
  
 我也测了一下，不过要先将3f1c4e4b6b16bbbd69b2ee476dc4f83a中的2个0c6dc11e160d3b678d68754cc175188a标签改到6c04bd5ca3fcae76e30b72ad730ca86d标签中才可行，否则会报js异常。如下：  
  
<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>
  
  
 不需要定义，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>
  
  
 我也测了一下，不过要先将3f1c4e4b6b16bbbd69b2ee476dc4f83a中的2个0c6dc11e160d3b678d68754cc175188a标签放到3f1c4e4b6b16bbbd69b2ee476dc4f83a标签之外才可行，否则会报js异常。如下：  
  
  
 e3ca3a08bcd9ad0a09d552c89643150e  
 asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdkls  
 jksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas    ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlks  
 jdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjk  
 sldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas  
 16b28748ea4df4d9c2150843fecfba68  
  
 8019067d09615e43c7904885b5246f0a  
 function changeImg(obj){  
    obj.style.backgroundImage = "url(img/yygk1.png)";  
    //obj.style.backgroundImg = "url(img/yygk1.png)";  
    //obj.style.background = "url(img/yygk1.png)";  
 }  
 2cacc6d41bbb37262a98f745aa00fbf0  
 0c6dc11e160d3b678d68754cc175188a  
 0c6dc11e160d3b678d68754cc175188a 
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：純粋な CSS を使用して、drop-down_html/css_WEB-ITnose をスライドして表示する効果を実現したいと考えています。次の記事：純粋な CSS を使用して、drop-down_html/css_WEB-ITnose をスライドして表示する効果を実現したいと考えています。
関連記事
続きを見る