用Jscript在HTML中切換圖像

所以我試圖： 1）通過點擊一個按鈕來切換背景顏色和DIV元素 2）通過點擊一個按鈕來改變圖像源（不切換）。用Jscript在HTML中切換圖像

代碼對我來說很簡單，對，我沒有看到它的問題，但由於某種原因只是不工作！請幫助...任何建議將高度讚賞隊友。

<!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>

來源

2013-11-01 Madventures

您正在使用

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?

來源

2013-11-01 17:32:14

試試這個

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

來源

2013-11-01 17:37:19

讀取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不是十六進制值設定背景顏色在HTML中，否則你將需要一些更多的功能，從十六進制將RGB轉換。 ;）E.x.風格= 「背景色：RGB（59122240）;」

來源

2013-11-01 17:54:19

用Jscript在HTML中切換圖像

回答

相關問題