Question

<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”变量时，它不起作用。知道为什么

Answer 1

您只是在使用字符串“ img”，但实际上是要使用变量：

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

Answer 2

尝试这个例子

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>

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

2 个答案: