Question

我有此代码，我想输入字段背景红色为红色。.

$(document).ready(function(){
    $(".abc").focus(function(){
        $(this).attr('background', 'red');
        $("label").text('Tekstas cia').fadeOut(2000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="male">Last name:</label>
<input class="abc" type="text" name="LastName" value=""><br>

Answer 1

您需要将attr更改为css

$(document).ready(function(){
    $(".abc").focus(function(){
        $(this).css('background-color', 'red');
        $("label").text('Tekstas cia').fadeOut(2000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="male">Last name:</label>
<input class="abc" type="text" name="LastName" value=""><br>

Answer 2

使用css()代替attr()，并使用background-color代替background

$(window).ready(function(){
    $(".abc").focus(function(){
        $(this).css('background-color', 'red');
        $("label").text('Tekstas cia').fadeOut(2000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="male">Last name:</label>
<input class="abc" type="text" name="LastName" value=""><br>

Answer 3

您可以完全避免使用JS/Jquery，而仅使用CSS将颜色应用于focus事件

.abc:focus {
  background: red;
}

作为一种好习惯，请始终将样式保持在脚本之外为了代码的可维护性

CSS（此）元素和输入背景色

3 个答案: