Question

我正在使用一本书来学习Javascript教程。练习使用<input type="search">更改document.querySelector中的背景颜色。当我尝试在搜索框中搜索没有文字的内容时，<input>的背景会变为红色。我是使用onsubmit和一些有条件的。但是在下一部分中，它必须使用onfocus返回白色背景，而我却没有。

我尝试的代码是

document.querySelector('#form-busca').onsubmit = function() {
    if (document.querySelector('#q').value == '') {
        document.querySelector('#q').style.background = 'red';
        return false;
    }
}

document.querySelector('#form-busca').onfocus = function() {
    document.querySelector('#q').style.background = 'white';
}

有人能帮助我吗？非常感谢！

Answer 1

听起来您希望在input元素聚焦时输入的背景颜色变为白色。

尝试将onfocus选择器更改为：
document.querySelector('#q').onfocus ...

Answer 2

您希望onfocus处理程序位于#q元素上，而不是#form-busca上;表单的焦点无关紧要，您希望在输入元素获得焦点时清除背景：

document.querySelector('#q').onfocus = function() { ... }

Answer 3

几乎得到了它。

变化：

document.querySelector('#form-busca').onfocus

为：

document.querySelector('#q').onfocus

修改后的代码：

正确的样本：

document.querySelector('#form-busca').onsubmit = function() {
    if (document.querySelector('#q').value == '') {
        document.querySelector('#q').style.background = 'red';
        return false;
    }
}

document.querySelector('#q').onfocus = function() {
    document.querySelector('#q').style.background = 'white';
}

Answer 4

尝试以下代码：

// select
var h1 = document.querySelector("h1");
// manipulate
h1.style.color = "red";

这将使h1的颜色变为红色。

使用querySelector更改颜色

4 个答案: