javascript - 如何使用 javascript 更改输入的样式？

Question

我想给一个

-webkit-box-shadow:inset 0 0 5px black;

属性到文本框，因为人们关注它。

例如，这里背景颜色正在更改，但我想要 box-shadow 代替。

<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>

和 HTML

<input type="text" onfocus="myFunction(this)">

Answer 1

为什么不在 CSS 中使用 :focus 呢？

http://jsfiddle.net/VjLKV/

input {
    border: 1px solid black;
}

input:focus {
    outline: none;
    border: 1px solid black;
    -webkit-box-shadow:inset 0 0 5px black;
}

Answer 2

定义css类，你可以根据需要轻松切换。

<script>
function myFunction(x)
{
x.style.className="yourcssclass";
}
</script>

Answer 3

不要为此使用 JS，而是使用 CSS 伪类:focus：

input[type="text"]:focus
{
    -webkit-box-shadow:inset 0 0 5px black;
    box-shadow:inset 0 0 5px black;
}

这样，当用户进入文本框或单击它时，文本框将获得阴影，或者其他任何方式 - 当它们离开时样式将正确消失，依此类推。

记住也要使用 box-shadow 样式的无前缀版本。