스타일시트 CSS 명칭이 text-decoration 처럼 중간에 하이픈이 들어가면 자바스크립트로 어떻게 다룰까

만약 '즐거운 하루.. ~.~' 라는 텍스트 위에 마우스 커서가 올려질 때 밑줄이 그어지고,
마우스 커서가 다른 곳으로 이동할때 다시 밑줄이 없어지게 하려면 어떻게 해야 할까..?
스타일 시트를 사용하면 되겠는데.. 이렇게 해 볼까..?

<span style="text-decoration:uderline">즐거운 하루.. ~.~ </span>

위와 같이 하면, 밑줄은 그려지는데.. 마우스가 다른 곳으로 이동할때도 밑줄이 그대로 있다.. ㅠ
역시 자바스크립트를 사용해야 한다.
그런데, 하이픈이 들어간 명칭을 자바스크립트로 처리하려면 어떻게 해야 할까..?

<span onMouseOver="function1(this)" onMouseOut="function2(this)">즐거운 하루.. ~.~ </span>
<script language="JavaScript">
<!--
function function1(o){
  o.style.text-decoration = 'uderline';
}

function function2(o){
  o.style.text-decoration = 'none';
}
//-->
</script>

위와 같이 하면, 대략 난감해 진다.. ㅠㅠ
그렇다.. 정답은, 하이픈 뒤의 첫 알파벳을 대문자로 하고, 하이픈은 지우는 것.

<span onMouseOver="function1(this)" onMouseOut="function2(this)">즐거운 하루.. ~.~ </span> <script language="JavaScript"> <!-- function function1(o){  o.style.textDecoration = 'underline'; } function function2(o){  o.style.textDecoration = 'none'; } //--> </script>

이제는 정상적으로 작동을 한다. .ㅠ