作者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