如何给table动态添加CSS样式
请教大家一个问题:在我站点下有一个CSS文件一个htm页面,在htm页面中有一个4行4列的表格及一个按钮,在CSS文件中设置了表格的各种设置,css文件的名称为css1,
我想要的效果是Click按钮后,表格的样式发生改变,样式为css1设置的样式,
我用createStyleSheet()方法没有实现效果,不知道什么地方有错误,我也不知道怎么写!
希望大家帮帮忙!谢谢了!
我的htm页面代码为
<SCRIPT language= "JavaScript ">
function style(){
var t=document.getElementById( "table_style ")
t.createStyleSheet( "css/css1.css ")
}
</SCRIPT>
</HEAD>
<link href= "css/css1.css " rel= "stylesheet " type= "text/css ">
<BODY>
<table width= "710 " height= "405 " border= "1 " id= "table_style ">
<tr>
<td height= "20 " colspan= "4 "> </td>
</tr>
<tr>
<td height= "20 " colspan= "4 "> </td>
</tr>
<tr>
<td width= "88 " rowspan= "2 "> </td>
<td width= "252 "> asdasd </td>
<td width= "170 "> </td>
<td width= "172 "> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width= "710 " border= "1 ">
<tr>
<td>
<input type= "button " name= "Submit2 " value= "按钮 " onclick= "style() ">
</td>
</tr>
</table>
css1的代码为:
table{
font-size: 12px;
color: #990000;
text-decoration: none;
background-color: #003300;
}
[解决办法]
table_style.className= "newcssname ";
newcssname:重新定义的样式名
如果不想定义样式，那么直接操作样式属性也可以：
table_style.style.width= "100px ";
[解决办法]
你的table样式是全局的
而且css1已经连接进来了啊
把你的连接改成css1以外的吧
<SCRIPT language= "JavaScript ">
function style(){
document.getElementById( 'mycss ').href= 'css1.css '
}
</SCRIPT>
</HEAD>
<link href= "css/css2.css " id= "mycss " rel= "stylesheet " type= "text/css ">
<BODY>
<table width= "710 " height= "405 " border= "1 " id= "table_style ">
<tr>
<td height= "20 " colspan= "4 "> </td>
</tr>
<tr>
<td height= "20 " colspan= "4 "> </td>
</tr>
<tr>
<td width= "88 " rowspan= "2 "> </td>
<td width= "252 "> asdasd </td>
<td width= "170 "> </td>
<td width= "172 "> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width= "710 " border= "1 ">
<tr>
<td>
<input type= "button " name= "Submit2 " value= "按钮 " onclick= "style() ">
</td>
</tr>
</table>
css1的代码为:
table{
font-size: 12px;
color: #990000;
text-decoration: none;
background-color: #003300;
}
#table_style{
font-size:9pt;
color:#ff0000;
background:#0000ff;
}