使用 Javascript 在 HTML 中切换图像答案

【问题标题】：Toggle image in HTML with Jscript使用 Javascript 在 HTML 中切换图像
【发布时间】：2013-11-01 17:18:06
【问题描述】：

所以我尝试： 1) 通过单击按钮切换 DIV 元素的背景颜色 2）通过单击按钮更改图像源（不是切换）。

代码对我来说非常简单，而且我认为它没有问题，但由于某种原因，它不起作用！请帮助...任何建议将不胜感激队友。

<!Doctype HTML>
<HTML>
<head>
<script>
function changeimage()
{    x = document.getElementById("image");
 x.src="e:\PHOTOS\garfield-coffee.jpg";
 x.alt="e:-\PHOTOS\garfield-coffee.jpg";   // the new image doesnt load, but if I specify an "alt", it seems to work.
}

function changeDivColor()
{  x = document.getElementById("main_container")
if(x.style.backgroundColor=="#3B7AF0")       // the if thens just dont work. Simply changing color one time does.
{  x.style.backgroundColor="#dfedf0";   }
else
{  x.style.backgroundColor=="#3B7AF0";  }
}

</script>
</head>
<body>
<div id="main_container" style="background-color:#3B7AF0;width:1800px;height:1800px;font-size:10pt">

<img id="image" src="e:\photos\garf2.jpg" width:40px height:40px></img>

<div id="Scriptarea">                          <!-- Javascript stuff -->
<form>
<input type="button" onclick="changeimage()" value="click here to change garfield"></input>
<input type="button" onclick="changeDivColor()" value="Change DIV color"></input>
</form>
</div>                                 <!-- Javascript stuff -->


</div>

</body>

【问题讨论】：

标签： image toggle

【解决方案1】：

你正在使用

if(x.style.backgroundColor=="#3B7AF0");

无论背景颜色是什么，这都是错误的，因为

 element.style.backgroundColor

在你得到元素x之后，看看

返回一个 RGB 值 (console.log(x.style.backgroundColor); // use this and see the console)，您无法直接与 HEX 值进行比较。你会得到转换技巧here

How to get hex color value rather than RGB value?

【讨论】：

【解决方案2】：

试试这个

var imgUrl = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL2CuC1sDp7s3Z0kL-0k1rcrgw8MpNJV7L4HPw-Ez9YOcqokjsyCZqBqbv";
var imgUrl2 = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtZsHc2xA0fazpA-zx79WaGWx_Enn0SV9DaaPc1N-jA5IxgSwF79W0g5_1";
function changeDivColor() {
    $("#main_container").css("background-color",'red');
}
function changeimage() {
  var img = $("#image"), url = imgUrl;
    if (img.attr("src") == imgUrl) {url = imgUrl2;}
    img.attr("src", url);
}
$("#changeimg").click(changeimage);
$("#colorbtn").click(changeDivColor);

Js fiddle sample using jquery

【讨论】：

【解决方案3】：

在浏览器之间读取 css 值并不有趣或不一致。我建议您在 Javascript 中将当前背景颜色设置为 var，然后在两者之间切换时对其进行更新/评估。

话虽如此，这是一个实际的（几乎所有）跨浏览器解决方案，用于您尝试对背景颜色交换进行的操作。

function changeDivColor()
{
    //Get the main_container element.
    x = document.getElementById("main_container")

    //Get the current styling for the element.
        //Reading styles isn't cross browser friendly, try x.currentStyle (IE) otherwise use document.defaultView.getComputedStyle (FF, Chrome, etc)
    var style = (x.currentStyle ? x.currentStyle : document.defaultView.getComputedStyle(x,null));

    //Get the backgroundColor from the returned style object, remove all spaces. (Chrome outputs rgb(59, 122, 240) and IE spits out rgb(59,122,240))
    var currentColor = style.backgroundColor.replace(/ /g,'');

    //Set the background color to 223,237,240 if its currently 59,122,240 (Sorry, cleaner than a long if/else and good to learn) ;)
    x.style.backgroundColor=(currentColor=="rgb(59,122,240)"?"rgb(223,237,240)":"rgb(59,122,240)");
}

确保您在 html 中使用 rgb 而不是 hex 值设置背景颜色，否则您将需要更多函数才能将 hex 转换为 rgb。 ;）前任。样式="背景颜色:rgb(59,122,240);"

【讨论】：