Javascript 单击更改图像的背景_Javascript_Html_Css_Iframe_Web

Javascript 单击更改图像的背景

javascript html css iframe web

Javascript 单击更改图像的背景,javascript,html,css,iframe,web,Javascript,Html,Css,Iframe,Web,我有一个图像，我需要在单击时更改其背景。我使用下面的javascript和html来做这件事。为了简单起见，我首先喜欢红色背景，参考图像是透明背景代码是： <!DOCTYPE html> <html> <body> <iframe id="myframe" src="img-thing.png"></iframe> <p>Click the button to change the background color o

我有一个图像，我需要在单击时更改其背景。我使用下面的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中包含的图片的背景色

试试看
函数myFunction（）
{
var x=document.getElementById（“myframe”）；
变量y=（x.contentWindow | | x.contentDocument）；
y、 body.style.backgroundColor=“红色”；
}

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

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

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


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

png

文件是一个图像文件。它没有

主体

标记。所以它不会起作用。相反，尝试在

src

属性中放置一个HTML链接（例如

something.HTML

）。希望有帮助

如果要更改图像的背景色，请使用

img

标记，而不是

iframe

。然后您可以直接访问

img

元素并更改其背景色，如

document.getElementById（“someimg”）.style.backgroundColor=“red”


png
文件是一个图像文件。它没有主体
标记。所以它不会起作用。相反，尝试在src
属性中放置一个HTML链接（例如something.HTML
）。希望有帮助
如果要更改图像的背景色，请使用img
标记，而不是iframe
。然后您可以直接访问img
元素并更改其背景色，如document.getElementById（“someimg”）.style.backgroundColor=“red”为什么使用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>


单击该按钮可更改iframe中包含的图片的背景色

试试看
函数myFunction（）{
var myframe=document.getElementById（'myframe'）；
myframe.style.backgroundColor=“红色”；
}

为什么要使用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>


单击该按钮可更改iframe中包含的图片的背景色

试试看
函数myFunction（）{
var myframe=document.getElementById（'myframe'）；
myframe.style.backgroundColor=“红色”；
}

如果要在单击按钮时更改不同的颜色，请尝试此操作，它可能会对您有所帮助
script language=“JavaScript”type=“text/JavaScript”>
函数更改pic（picColor）
{
如果（picName==“btnRed”）
{
document.getElementById（mainPic.src=“mainPicRed.jpg”
} 
else if（picName==“btnbtnYellow”）
{
document.getElementById（mainPic.src=“mainPicYellow.jpg”
} 
}
如果您想在单击按钮时更改不同的颜色，请尝试此操作，它可能会对您有所帮助
script language=“JavaScript”type=“text/JavaScript”>
函数更改pic（picColor）
{
如果（picName==“btnRed”）
{
document.getElementById（mainPic.src=“mainPicRed.jpg”
} 
else if（picName==“btnbtnYellow”）
{
document.getElementById（mainPic.src=“mainPicYellow.jpg”
} 
}

请忽略我的蹩脚英语。iframe
标记没有属性img src
。它有属性src
但没有img src
很抱歉，我尝试了，但仍然没有结果。我不明白这行：if（y.document）y=y.document什么是y.document
？即使我也不确定。我从Please ignore my bad English（请忽略我糟糕的英语）中学习到了该部分。iframe
标记没有属性img src
。它有属性src
但没有img src
很抱歉，我尝试了，但仍然没有结果。我不明白这行：if（y.document）y=y.document什么是y.document
？即使我也不确定。我从《伟大》杂志上学到了这一部分，它成功了！谢谢@Anthony。只是一个小问题，我使用iframe是因为我想把图像包含在框架中。太棒了！谢谢@Anthony。只是一个小问题，我使用iframe是因为我想把图片放在框架内。谢谢@chris97ong。非常有价值的信息。谢谢@chris97ong。非常有价值的信息。