最近在做网页的时候,需要动态修改icon,然后发现了img标签在样式中使用content属性的url可以进行修改起图片引用地址以达到修改的目的,但是使用了之后发现了坑,好像只有Chrome浏览器支持,FF等好多其它浏览器都不能支持这种方式.
<style>
body{
display:flex;
justify-content:space-around;
}
div{
width:300px;
height:300px;
margin: 30px auto 0;
background-color:#848484;
text-align:center;
}
div:first-child > img{
content:url('./baby.jpg')
}
</style>
<body>
<div class="img-box-1">
<p>图片1</p>
<img src="./star.jpg" alt="">
</div>
<div class="img-box-1">
<p>图片2</p>
<img src="./star.jpg" alt="">
</div>
</body>
Chrome浏览器效果
Firefox浏览器效果
Microsoft Edge浏览器效果
安全起见还是用js动态改变img的src属性来吧