DOM更改参数不起作用的背景图像

问题描述 投票:0回答:2
<script>

    function imageChange(img)
    {

        //document.getElementsByClassName('bgdodge')[0].style.backgroundImage= "url('pictures/gtr.jpg')";
        document.getElementsByClassName('bgdodge')[0].style.backgroundImage= "url(img)";
    }
</script>


<body>

<div class= "bgdodge">
    <div id="clockbox"></div>
    <div class="pcenter">
        <p onmouseover= "imageChange('pictures/gtr.jpg')" onmouseout= "imageChange('pictures/hellcat.jpeg')"> Dodge Charger SRT Hellcat</p>
    </div>
</div>

当我像不带参数的imageChange函数中的注释中那样执行时,它就可以工作。但是,当在onmouseover和mouseout上将图片传递到imageChange并使用“ img”变量时,它不起作用。 Idk为什么

javascript html dom
2个回答
2
投票

您只是使用字符串“ img”,但实际上是要使用变量:

document.getElementsByClassName('bgdodge')[0].style.backgroundImage= "url("+img+")";

0
投票

尝试此示例

function screen(){
alert('ddd')
const render = node =>
  domtoimage.toPng(node)
  .then(dataUrl => {
  console.log(performance.now()-pf)
    const img = new Image();
    img.src = dataUrl;
    $('body').append(img);
  })
  .catch(error =>
    console.error('oops, something went wrong!', error)
  );

const foo = document.getElementById('foo');

var pf=performance.now();
render(foo);

}
<script src="https://cdn.rawgit.com/tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="foo">
  <div >foo</div>
<button onclick="screen()">shot</button>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.