通过HTML标记更改div的背景url

-1

我有一个div（CSS - 高度：250px，宽度：70％），我已经通过CSS设置了背景。我想改变背景。通过HTML标记更改div的背景url

这很简单，我知道。但我想从HTML标签中获取背景源。

例：

<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>

谁能帮助我吗？

来源

2016-07-25 Jukka Nevalainen Imbera

你尝试写一些代码？ – Dekel

向我们展示你的尝试？ – Manjuboyz

我不知道从哪里开始实际上......我心中没有任何东西 –

不知道我是否明白你想要完成什么。你为什么不放弃HTML标签的要求，只是试试css：hover？

#somediv { 
    background: url(...); 
} 

#somediv:hover { 
    background: url(...); /* different url */ 
}

http://www.w3schools.com/cssref/css3_pr_background.asp

来源

2016-07-25 14:47:51

我需要从数据库中获取这两个图像，并将它们直接回显到HTML标记中，因为会有更多的这些div，并且它们每个都会有自己的图像 –

如果你不使用jQuery你可以使用基本事件监听器达到预期的效果。 https://jsfiddle.net/gnu9utos/3/

// first get the element that we'll be interacting with 
var element = document.querySelector('.somediv'); 

// assuming we managed to successfully get the element from the document 
if(element) { 
    var before = element.getAttribute('data-imgbefore'); 
    var after = element.getAttribute('data-imgafter'); 

    if(before && after) { 
     element.style.background = 'url(' + before + ')'; // set the initital state 

     element.addEventListener('mouseover', function(event) { 
      element.style.background = 'url(' + after + ')'; 
     }); 

     element.addEventListener('mouseout', function(event) { 
      element.style.background = 'url(' + before + ')'; 
     }); 
    } 
}

~~您可能要添加的支票 mouseleave恢复该图像返回其原始状态~~ 并添加CSS的一点点。

我希望这是有帮助的。

来源

2016-07-25 14:55:30 connorb

非常感谢，这就是我在找什么！非常感谢你！ –

我已经增加了更多的div来模拟未来的工作，它只适用于其中一个潜水...我不知道为什么 –

您需要将'document.querySelector'更改为'document.querySelectorAll'。然后您需要循环并将'element'更改为返回数组的循环索引。 – connorb

你能做到这一点用这个简单的JQ

也许它不是最好的解决方案，但它works.i添加background-color所以你可以看到的变化。但你可以删除，只留下background-image

看到这里 jsfiddle

了2个变量，并将它们分配给每个图像（IMG之前和之后），以每分度类.somediv

添加初始background-image到div

然后在盘旋时，background-image的div在之间变化210和imgafter

JQ：

$(".somediv").each(function(){ 

    var imgbef = $(this).data("imgbefore"), 
     imgaft = $(this).data("imgafter") 
    $(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'}); 

    $(this).hover(function(){ 

    $(this).css({'background-image': 'url(' + imgaft + ') ','background-color':'blue'}); 
    }, function(){ 
    $(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'}); 
    }); 

});

HTML：

<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>

CSS：

.somediv { 
    height:250px; 
    width:70%; 
}

让我知道，如果它可以帮助

来源

2016-07-25 14:59:26

您可以添加所有的div你喜欢一个d只更改数据imgbefore和数据imgafter !!!

$(document).ready(function(){ 
 
\t 
 
\t $('.somediv').each(function(index, value) { 
 
\t \t var img = $(this).attr('data-imgbefore'); 
 
\t \t $('.somediv').css({'background-image':'url('+ img +')', 'background-size':'200px 200px'}); 
 
\t }); 
 
\t 
 
\t //$('.somedive').css({'background-image':'url("http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png")', 'background-size':'200px 200px'}); 
 
\t 
 
\t $('.somediv').hover(
 

 
\t \t function() { 
 
\t \t \t var img = $(this).attr('data-imgafter'); 
 
\t \t \t $(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'}); 
 
\t \t }, 
 

 
\t \t function() { 
 
\t \t \t var img = $(this).attr('data-imgbefore'); 
 
\t \t \t $(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'}); 
 
\t \t } 
 
\t); 
 
});

.somediv {width:200px;height:200px;border:1px solid #F2F2F2;border-radius:4px;display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div> 
 
<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>

干杯！

来源

2016-07-25 15:04:42

你可以很容易地实现与JavaScript。你也可以添加一个onmouseleave函数，但这一次，传递this.dataset.imgbefore作为第二个参数。

changebg = function(el, i) { 
 
\t var t = "url("+i+")"; 
 
\t el.style.backgroundImage = t; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <div class="somediv" id="mydiv" data-imgbefore="http://lorempixel.com/400/200/sports" data-imgafter="http://lorempixel.com/400/200/animals" onmouseover="changebg(this, this.dataset.imgafter)">Lorem</div> 
 
</body> 
 
</html>

来源

2016-07-25 15:06:35 marmeladze

通过HTML标记更改div的背景url

回答

相关问题