Question

我有一项功能可以在用户尝试提交时将搜索框的背景更改为红色，但是它为空，然后将其更改为“无”＃当用户点击它时，如下所示：

HTML：

<form action="http://www.google.com/search" id="search-box">
        <input type="search" name="q" id="q" />
        <input type="image" src="img/search.png" />
</form>

使用Javascript：

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

document.querySelector('#q').onclick = function () {
    if (document.querySelector('#q').style.background == 'red') {
        document.querySelector('#q').style.background = '';
        return false;
    }
}

它在chrome上工作正常，但它不适用于firefox ...任何想法为什么？

Answer 1

当您document.querySelector('#q').style.background时，它会将元素的背景属性设置为background: none repeat scroll 0% 0% #F00;

要实现您的目标，请设置...style.backgroundColor，而不是

document.querySelector('#search-box').onsubmit = function () {
    if (document.querySelector('#q').value == '') {
        document.querySelector('#q').style.backgroundColor = 'red';
        return false;
    }
}

document.querySelector('#q').onclick = function () {
    if (document.querySelector('#q').style.backgroundColor == 'red') {
        document.querySelector('#q').style.backgroundColor = '';
        return false;
    }
}

Javascript - 更改输入背景

1 个答案: