0

所以我尝试： 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>
4

3 回答 3

0

尝试这个

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);

使用 jquery 的 Js 小提琴示例

于 2013-11-01T17:37:19.503 回答
0

您正在使用

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

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

 element.style.backgroundColor

在你得到元素 x 后，看看

console.log(x.style.backgroundColor); // use this and see the console返回一个无法与 HEX 值直接比较的 RGB 值 ( )。您将在此处获得转换技术

如何获得十六进制颜色值而不是 RGB 值？

于 2013-11-01T17:32:14.750 回答
0

在浏览器之间读取 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)");
}

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

于 2013-11-01T17:54:19.687 回答