功能＆ID以JavaScript

我有一個Javascript函數來改變SVG橢圓對象的顏色使用id =「眼睛」功能＆ID以JavaScript

document.getElementById("eye").onmouseover = function() { 
    changeColor() 
}; 

function changeColor() { 
    document.getElementById("eye").style.fill = "red"; 
} 

document.getElementById("eye").onmouseout = function() { 
    changeColor2() 
}; 

function changeColor2() { 
    document.getElementById("eye").style.fill = "green"; 
}

現在有使用id =「鼻子」 2個SVG對象和id =」嘴巴「，我該如何在這兩個物體上應用相同的變色功能？是的，我可以重複2次，但必須有更好的方式來做到這一點。注意3個對象不應同時改變顏色，這意味着不需要循環。

來源

2014-11-21 ZhangYao Jiayin

ID的情況下應該是元素獨特。 – 2014-11-21 20:12:59

你在這裏看到任何2個具有相同ID的元素嗎？：d – 2014-11-21 20:18:32

你的意思是那樣嗎？：

document.getElementById("eye").onmouseover = function() { 
    changeColor("eye") 
}; 
document.getElementById("nose").onmouseover = function() { 
    changeColor("nose") 
}; 
document.getElementById("mouth").onmouseover = function() { 
    changeColor("mouth") 
}; 

document.getElementById("eye").onmouseout = function() { 
    changeColor2() 
}; 
document.getElementById("nose").onmouseout = function() { 
    changeColor2("nose") 
}; 
document.getElementById("mouth").onmouseout = function() { 
    changeColor2("mouth") 
}; 

function changeColor(element) { 
    document.getElementById(element).style.fill = "red"; 
} 

function changeColor2(element) { 
    document.getElementById(element).style.fill = "green"; 
}

來源

2014-11-21 20:12:15

您可以將參數添加到您的功能：

function changeColor(element, color) { 
    element.style.backgroundColor = color; 
} 

document.getElementById("eye").onmouseover = function(){changeColor(this, "red")}; 
document.getElementById("eye").onmouseout = function(){changeColor(this, "green")}; 

document.getElementById("nose").onmouseover = function(){changeColor(this, "blue")}; 
document.getElementById("nose").onmouseout = function(){changeColor(this, "orange")};

修訂

語法背景顏色固定的（而不是.style.fill是.style.backgroundColor）

See Demo Fiddle

Reducing element look-ups

來源

2014-11-21 20:13:31 ochi

儘量讓這樣的封閉：

// Caching elements and closures 
var eye = document.getElementById("eye"), 
    nose = document.getElementById("nose"), 
    mouth = document.getElementById("mouth"), 
    change_to_green = change_group_color("green"), 
    change_to_red = change_group_color("red"); 


eye.onmouseover = change_to_green; 
eye.onmouseout = change_to_red; 

nose.onmouseover = change_to_green; 
eye.onmouseout = change_to_red; 

mouth.onmouseover = change_to_green; 
mouth.onmouseout = change_to_red; 


function change_group_color(color){ 
    var elem_group = [eye, nose, mouth]; 

    return function(){ 
     var i,l; 
     for(i=0, l=elem_group.length ; i<l ; i++){ 
      elem_group[i].style.fill = color; 
     } 
    } 
}

來源

2014-11-21 20:27:10 fernandosavio

this的處理程序內將指向您註冊與

function onMouseOver() { 
    this.style.fill = "red"; 
} 

function onMouseOut { 
    this.style.fill = "green"; 
} 

var eye = document.getElementById("eye"); 
var nose = document.getElementById("nose"); 
eye.onmouseover = nose.onmouseover = onMouseOver; 
eye.onmouseout = nose.onmouseout = onMouseOout;

來源

2014-11-21 23:22:34

功能＆ID以JavaScript

回答

相關問題