Question

我有一张图片，我需要更改背景onclick。我使用以下javascript和html来做这件事。为简单起见，我首选首选红色背景，参考图像采用透明背景。

代码是：

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="img-thing.png"></iframe>

<p>Click the button to change the background color of the picture contained in the iframe.</p>

<p id="demo"></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);

y.body.style.backgroundColor="red";
}
</script>

</body>
</html>

我知道在这里使用iframe可能有问题所以我试过了：

<div id="myframe"><img src="img-thing.png"></div>

而不是iframe。如果我从iframe标记中删除src字段，它可以正常工作。但是，当我插入图像并单击尝试时，它不起作用。请帮忙。

Answer 1

为什么使用iframe？在 div 中使用 img 标记并更新div的背景颜色

<!DOCTYPE html>
<html>
<body>

<div id="myframe"><img src="http://img1.wikia.nocookie.net/__cb20110821045825/meme/images/3/3d/LOLGuy.png" />    </div>

<p>Click the button to change the background color of the picture contained in the iframe.</p>

<p id="demo"></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction(){
    var myframe = document.getElementById('myframe');
    myframe.style.backgroundColor = "red";
}
</script>

</body>
</html>

http://jsfiddle.net/TZXU3/1/

Answer 2

<iframe id="myframe" src="img-thing.png"></iframe>

png文件是图像文件。它没有body标记。所以它不会起作用。相反，请尝试在something.html属性中添加HTML链接（例如src）。希望有所帮助。

如果要更改图像的背景颜色，请使用img标记，而不是iframe。然后，您可以直接访问img元素并更改其背景颜色，例如document.getElementById("someimg").style.backgroundColor = "red";

Answer 3

如果您想在点击按钮时更改不同的颜色，请尝试此操作，它可能会对您有所帮助

脚本语言=＆＃34; JavaScript＆＃34;类型=＆＃34;文本/ JavaScript的＆＃34;＆GT;

function changePic（picColor） { if（picName ==＆＃34; btnRed＆＃34;） { document.getElementById（mainPic）.src =＆＃34; mainPicRed.jpg＆＃34; } 否则如果（picName ==＆＃34; btnbtnYellow＆＃34;） { document.getElementById（mainPic）.src =＆＃34; mainPicYellow.jpg＆＃34; } }

</script>

单击时更改图像的背景

3 个答案: