javascript实现点击文本框更改CSS样式

2026-04-16 21:44:20

1、目标:点击下图的数字后,该数字所在的文本框的样式发生改变。

javascript实现点击文本框更改CSS样式

2、下面是这些数字列表的HTML代码:

<div class="q_box" onclick="answer(this,1)" id="1">1</div>

<div class="q_box" onclick="answer(this,2)" id="2">2</div>

<div class="q_box" onclick="answer(this,3)" id="3">3</div>

<div class="q_box" onclick="answer(this,4)" id="4">4</div>

<div class="q_box" onclick="answer(this,5)" id="5">5</div>

<div class="q_box" onclick="answer(this,6)" id="6">6</div>

<div class="q_box" onclick="answer(this,7)" id="7">7</div>

<div class="q_box" onclick="answer(this,8)" id="8">8</div>

<div class="q_box" onclick="answer(this,9)" id="9">9</div>

<div class="q_box" onclick="answer(this,10)" id="10">10</div>

<div class="q_box" onclick="answer(this,11)" id="11">11</div>

<div class="q_box" onclick="answer(this,12)" id="12">12</div>

<div class="q_box" onclick="answer(this,13)" id="13">13</div>

..........

javascript实现点击文本框更改CSS样式

3、下面是这些数字列表的JAVASCRIPT代码:

<script type="text/javascript">

        function answer(obj, id) {

                    $('#'+id).attr('class','q_box_f');

}

</script>

4、这里CSS代码省略了。

下面它的效果图:

javascript实现点击文本框更改CSS样式

猜你喜欢