最近在做网页的时候,需要动态修改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属性来吧
