JS CSS字體顏色和下划線

Question

我想更改字體的CSS。

<div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div>
<div id="b">This is element b</div>

<div id="f" onmouseover="chbg('blue','g')" onmouseout="chbg('white','g')">This will change g element</div>
<div id="g">This is element g</div>

<div id="j" onmouseover="chbg('yellow','k')" onmouseout="chbg('white','k')">This will change k element</div>
<div id="k">This is element k</div>

據我了解，它使用“ chbg”來更改背景顏色，

如果我想使字體加下划線+字體顏色，該如何應用。

這是現場小提琴http://jsfiddle.net/NAuxn/

Answer 1

使用此功能，您可以更改字體顏色和下划線： http : //jsfiddle.net/NAuxn/4/

function chbg(color, id) {     
  document.getElementById(id).style.color = color;
  document.getElementById(id).style.textDecoration = "underline";                        
}

Answer 2

在函數調用中添加其他參數。 這樣當懸停時它將保持相同的樣式。

HTML

 <div id="a" onmouseover="chbg('red','b','underline','white')" onmouseout="chbg('white','b','none','black')">This will change b element</div>
 <div id="b">This is element b</div>

 <div id="f" onmouseover="chbg('blue','g','underline','white')" onmouseout="chbg('white','g','none','black')">This will change g element</div>
 <div id="g">This is element g</div>

 <div id="j" onmouseover="chbg('yellow','k','underline','white')" onmouseout="chbg('white','k','none','black')">This will change k element</div>
 <div id="k">This is element k</div>

JQUERY

function chbg(color, id, td, fc) { 
document.getElementById(id).style.backgroundColor = color;
document.getElementById(id).style.textDecoration = td;
document.getElementById(id).style.color = fc;
}

在上面的代碼中，我使用了chbg('red','b','underline','white')等四個參數。 第三個將說明text-decoration樣式，第四個將指出您希望將鼠標懸停在哪種顏色上。

在mouseout中，我已恢復為正常樣式。 這是使用代碼的解決方案。 我建議您創建一個具有懸停樣式的類，並將其應用於mouseover並在mouseout上將其刪除。

DEMO