<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:script src="Script/jquery-1.4.1.js" mce_src="Script/jquery-1.4.1.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ var i = 0; $("div").click(function() { var changecolor; i=i+1; if(i==4) { i=0; } $(this).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; }, color:function(index,value) { switch(i) { case 0: changecolor="#222" ; break; case 1: changecolor="#432" ; break; case 2: changecolor="#f00" ; break; case 3: changecolor="#0f0" ; break; } return changecolor; }, background-color:function(index,value) { return "#fff" } });//css });//click }) // --></mce:script> <mce:style type="text/css"><!-- div{ border:1px dashed #0F3; width:50px; height:100px; } --></mce:style><style type="text/css" mce_bogus="1">div{ border:1px dashed #0F3; width:50px; height:100px; }</style> </head> <body> <div> my name is wtq </div> </body> </html>
background-color:function(index,value) {
return "#fff"
}
问题：当background-color应用于上面的函数时，报错、
解决办法：当css中的属性包含“-”时，应该使用双引号，如下
"background-color":function(index,value) {
switch(i)
{
case 0: backcolor="#0f0" ; break;
case 1: backcolor="#00f" ; break;
case 2: backcolor="#432" ; break;
case 3: backcolor="#345" ; break;
}
return backcolor;
}
最终的代码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:script src="Script/jquery-1.4.1.js" mce_src="Script/jquery-1.4.1.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ var i = 0; $("div").click(function() { var changecolor; var backcolor; i=i+1; if(i==4) { i=0; } $(this).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; }, color:function(index,value) { switch(i) { case 0: changecolor="#222" ; break; case 1: changecolor="#432" ; break; case 2: changecolor="#f00" ; break; case 3: changecolor="#0f0" ; break; } return changecolor; } , "background-color":function(index,value) { switch(i) { case 0: backcolor="#0f0" ; break; case 1: backcolor="#00f" ; break; case 2: backcolor="#432" ; break; case 3: backcolor="#345" ; break; } return backcolor; } });//css });//click }) // --></mce:script> <mce:style type="text/css"><!-- div{ border:1px dashed #0F3; width:50px; height:100px; } --></mce:style><style type="text/css" mce_bogus="1">div{ border:1px dashed #0F3; width:50px; height:100px; }</style> </head> <body> <div> my name is wtq </div> </body> </html>
