作者lovelycateye (我還想要更多力量)
看板Ajax
標題Re: [問題] 基礎的JS+HTML
時間Thu Oct 21 00:37:23 2010
※ 引述《bcawosxy (??????)》之銘言：
: 小弟因為學校的關係正在學習網頁設計
: 最近在練習使用基本的JS搭配CSS跟HMTL做出變化
: 我想要做出數個按鈕
: 在事件時改變ID來做到改變CSS的效果
: -------------------------------------------
: <body>
: <form name="F">
: <input type="button" name="text1" id="t1" onmousemove="change(this.name)">
: <input type="button" name="text2" id="t1" onmousemove="change(this.name)">
: </form>
: </body>
: 但是這樣子做 在function卻無法自行判斷
: 是哪一個按鈕遇到事件
: 必須指定 :document.F.text1.id="t2" 這樣子
: 雖然說可以利用if來判斷傳送過來的值達到效果
: (if (value=text2) document.F.text2=id="t2" ..............)
: 但我想請問有沒有方法讓JS可以自行判斷
: 是哪一個按鈕遇到事件 且可以將改變id的指令回傳。
: 先謝謝各位囉。
code如下，其他如推文。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>JavaScript Example</title>
<style>
.btn{
color:gray;
}
.hover1{
background-color:red;
}
.hover2{
background-color:blue;
}
</style>
</head>
<body style="padding:0;margin:0;">
<script type="text/javascript">
function change(e){
var targetID = e.id,
element = document.getElementById(targetID),
className = element.getAttribute('class');
if ('t1' == targetID) {
className = -1 == className.indexOf('hover1') ? 'btn hover1' : 'btn';
element.setAttribute('class', className);
} else if ('t2' == targetID) {
className = -1 == className.indexOf('hover2') ? 'btn hover2' : 'btn';
element.setAttribute('class', className);
}
}
</script>
<form name="form1">
<input type="button" name="btn1" id="t1" class="btn" onclick="change(this)" value="按鈕1">
<input type="button" name="btn2" id="t2" class="btn" onclick="change(this)" value="按鈕2">
</form>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.84.11.75
1F：推 s25g5d4:IE6好像不吃setAttribute("class", name)吧? 10/22 15:41
2F：推 foreverangle:用.className吧 10/23 16:32