javascript动态改变文本框样式

[stiff_neck]

在jsp中的文本框

    <s:textfield name="NM" id="ID" onclick="clickEvent();" theme="simple" cssStyle="width:275px;" value=""></s:textfield>

想要实现点击文本框时，改变文本框的背景颜色和边框样式，在javascript中的代码如下

  	function clickEvent(){
  		this.cssStyle="background:#ffffdd;BORDER-RIGHT:#FFFFFF 2px inset;BORDER-TOP:#FFFFFF 2px inset;BORDER-LEFT:#FFFFFF 2px inset;BORDER-BOTTOM:#FFFFFF 2px inset";
  	}

但实际点击的时候，没有效果，请问要怎么改才行
tks

[泡泡鱼_]

js操作方式与你直接写入样式是不同的，没有那个方法，应该这样用。

this.style.background='#ffffdd';
this.style.borderRight='#FFFFFF 2px inset';
this.style.borderTop='#FFFFFF 2px inset';
this.style.borderLeft='#FFFFFF 2px inset';
this.style.borderBottom='#FFFFFF 2px inset';

因为你对border上下左右设置的是同样的，因此可以简化为：

this.style.background='#ffffdd';
this.style.border='#FFFFFF 2px inset';

[泡泡鱼_]

PS一下下：而且你这个绑定的也不应该是click事件，你应该绑定的是focus焦点事件
onfocus=""

再PS一下下，你应该把需要更换的样式写成一个class
比如:.inputfocus{background:#ffffdd;border:#FFFFFF 2px inset;}

那么，onfocus事件中只需要
this.className='inputfocus';即可

[张运领]

这个，我怎么没有找到cssStyle这个方法呢？这是哪个里面的方法啊？

[stiff_neck]

[Quote=引用 1 楼 的回复:]

js操作方式与你直接写入样式是不同的，没有那个方法，应该这样用。
JScript code
this.style.background='#ffffdd';
this.style.borderRight='#FFFFFF 2px inset';
this.style.borderTop='#FFFFFF 2px inset';
this.style.borderLeft='#FFFFFF 2……
[/Quote]

试了一下，还是无效的

[stiff_neck]

[Quote=引用 2 楼 的回复:]

PS一下下：而且你这个绑定的也不应该是click事件，你应该绑定的是focus焦点事件
onfocus=""

再PS一下下，你应该把需要更换的样式写成一个class
比如:.inputfocus{background:#ffffdd;border:#FFFFFF 2px inset;}

那么，onfocus事件中只需要
this.className='inputfocus';即……
[/Quote]

PS一下下: 你PS了好多下

[stiff_neck]

我用的是struts2框架，设置属性都是用的cssStyle

[张运领]

这个this，alert了一下，是window对象，不知道这个会不会有影响啊~~

[stiff_neck]

我在jsp这样静态设置是没问题的

 <s:textfield name="NM" 
id="ID" 
onclick="clickEvent();" 
theme="simple" 
cssStyle="background:#ffffdd;BORDER-RIGHT:#FFFFFF 2px inset;BORDER-TOP:#FFFFFF 2px inset;BORDER-LEFT:#FFFFFF 2px inset;BORDER-BOTTOM:#FFFFFF 2px inset"
value=""></s:textfield>

迷茫

[我就是大神]

2L正解。写到css文件.xxx{...}，再js里this.className="xxx";

[stiff_neck]

[Quote=引用 7 楼 的回复:]

这个this，alert了一下，是window对象，不知道这个会不会有影响啊~~
[/Quote]

果然是this的问题，换成document.getElementById('ID')就可以了，谢谢楼上诸位，稍后给分。

PS一下下：onfocus事件改变样式之后，想要失去焦点时恢复样式，在什么事件里写好

[泡泡鱼_]

你可以：

onfocus="clickEvent(this)"

function clickEvent(o){
   o.style.background='#ffffdd';
   o.style.border='#FFFFFF 2px inset';

}

[泡泡鱼_]

cssStyle可能是你jsp专有的属性设置，并不是js专用的

onfocus//获取焦点
onblur//失去焦点

[stiff_neck]

谢谢，结贴