怎么实现这样的效果
日期：2014-05-16 浏览次数：20488 次
如何实现这样的效果
<table ... class= "info ">
<tr>
<td> ... </td>
<td> ... </td>
...
</table>
我想实现这样的效果:当鼠标放在 <td> 上时背景颜色会变并且里面的字体会加粗,一般都是用 <td onmouseover= "... "..> 来实现,能否通过控制table(class= "info ")来实现？就是不在 <td> 里面写脚本了。
------解决方案--------------------
<style>
.info{background-color:red;font-weight:normal;font-size:22px;}
</style>
<script>
function chg(){
var rule = document.styleSheets(0).rules(0);
rule.style.backgroundColor = "yellow ";
rule.style.fontWeight = "bolder ";
}
</script>
<table class= "info ">
<tr>
<td> abc123 </td>
</table>
<input type= "button " onclick= "chg() " value= "Change ">
------解决方案--------------------
hookee真快，而且全版扫，呵呵
------解决方案--------------------
事件还是要写，只是样式改用CSS来控制罢了。
------解决方案--------------------
你是每次要改所有的td吗
不是的话还是用事件吧
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script>
function changeTdStyle(event,heightLight){
var obj= event.srcElement||event.target;
if(obj.tagName== "TD "){
if(heightLight){
obj.style.backgroundColor= '#8888ff ';
}
else{
obj.style.backgroundColor= ' ';
}
}
}
</script>
</head>
<body >
<div style= "font-size:10pt; ">
注1：鼠标移动，改变td背景。 <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：作者JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject= "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<br>
<table border= "1 " width= "400 " height= "200 " bgcolor= "#cccccc "
onmouseover= "changeTdStyle(event,true); "
onmouseout= "changeTdStyle(event,false); " >
<tr>
<td> 甲 </td>
<td> 乙 </td>
<td> 丙 </td>
<td> 丁 </td>
</tr>
<tr>
<td> 子 </td>
<td> 丑 </td>
<td> 寅 </td>
<td> 卯 </td>
</tr>
<tr>
<td> 上 </td>
<td> 大 </td>
<td> 人 </td>
<td> 孔 </td>
</tr>
<tr>
<td> 天 </td>
<td> 地 </td>
<td> 玄 </td>
<td> 黄 </td>
</tr>
<tr>
<td> 公 </td>
<td> 侯 </td>
<td> 伯 </td>
<td> 子 </td>
</tr>
<tr>
<td> 孟 </td>
<td> 仲 </td>
<td> 叔 </td>
<td> 季 </td>
</tr>
<table ... class= "info ">
<tr>
<td> ... </td>
<td> ... </td>
...
</table>
我想实现这样的效果:当鼠标放在 <td> 上时背景颜色会变并且里面的字体会加粗,一般都是用 <td onmouseover= "... "..> 来实现,能否通过控制table(class= "info ")来实现？就是不在 <td> 里面写脚本了。
------解决方案--------------------
<style>
.info{background-color:red;font-weight:normal;font-size:22px;}
</style>
<script>
function chg(){
var rule = document.styleSheets(0).rules(0);
rule.style.backgroundColor = "yellow ";
rule.style.fontWeight = "bolder ";
}
</script>
<table class= "info ">
<tr>
<td> abc123 </td>
</table>
<input type= "button " onclick= "chg() " value= "Change ">
------解决方案--------------------
hookee真快，而且全版扫，呵呵
------解决方案--------------------
事件还是要写，只是样式改用CSS来控制罢了。
------解决方案--------------------
你是每次要改所有的td吗
不是的话还是用事件吧
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script>
function changeTdStyle(event,heightLight){
var obj= event.srcElement||event.target;
if(obj.tagName== "TD "){
if(heightLight){
obj.style.backgroundColor= '#8888ff ';
}
else{
obj.style.backgroundColor= ' ';
}
}
}
</script>
</head>
<body >
<div style= "font-size:10pt; ">
注1：鼠标移动，改变td背景。 <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：作者JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject= "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<br>
<table border= "1 " width= "400 " height= "200 " bgcolor= "#cccccc "
onmouseover= "changeTdStyle(event,true); "
onmouseout= "changeTdStyle(event,false); " >
<tr>
<td> 甲 </td>
<td> 乙 </td>
<td> 丙 </td>
<td> 丁 </td>
</tr>
<tr>
<td> 子 </td>
<td> 丑 </td>
<td> 寅 </td>
<td> 卯 </td>
</tr>
<tr>
<td> 上 </td>
<td> 大 </td>
<td> 人 </td>
<td> 孔 </td>
</tr>
<tr>
<td> 天 </td>
<td> 地 </td>
<td> 玄 </td>
<td> 黄 </td>
</tr>
<tr>
<td> 公 </td>
<td> 侯 </td>
<td> 伯 </td>
<td> 子 </td>
</tr>
<tr>
<td> 孟 </td>
<td> 仲 </td>
<td> 叔 </td>
<td> 季 </td>
</tr>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
