Как использовать Firebug, чтобы найти атрибут CSS и изменить его с помощью Javascript

Question

В настоящее время я пытаюсь изменить цвет фона верхнего поля поиска на странице SO в моем веб-браузере навсегда, написав скрипт js для использования с Greasemonkey. У меня нет большого опыта работы с Javascript, но я не смог понять, как правильно использовать Firebug, чтобы выяснить, как ссылаться на определенный атрибут, что позволило бы мне его изменить. Я пробовал следующее:

document.getElementById('search').textbox.style.color = '#FFFFAA';
document.getElementById('search.textbox').style.color = '#FFFFAA';
.
.

и список комбинаций можно продолжить, но я полагаю, что я упускаю что-то фундаментальное в ссылках на Javascript. Мой Greasemonkey определенно работает как функция alert () на странице SO.

Вот фрагмент кода HTML:

<div id="topbar">
    <div id="hlinks">
    <div id="hsearch">
        <form id="search" autocomplete="off" method="get" action="/search">
            <div>
                <input class="textbox" type="text" value="" size="28" maxlength="140" tabindex="1"
                placeholder="search" name="q" autocomplete="off">
            </div>
        </form>
    </div>
</div>

Answer 1

Шаг за шагом:

1. Получить форму поиска с: var searchForm = document.getElementById('search');

2. Получить текстовое поле ввода, используя его имя (q): var searchBox = searchForm.q;

3. Установить цвет: searchBox.style.color = '#FFFFAA';

Или вы можете сделать все за один шаг:
document.getElementById('search').q.style.color = '#FFFFAA';

Но учтите, что если вы хотите изменить цвет фона, вам нужно использовать:
document.getElementById('search').q.style.backgroundColor= '#FFFFAA';

Поскольку цвет меняет цвет текста, а не фон.

Answer 2

Ваш скрипт не работает, так как вы ищете ID на этой странице, который не существует.

Изучая разметку для страницы SO, она выглядит следующим образом:

<input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="" style="width: 200px; max-width: 200px; ">

Следовательно, мы можем использовать следующее:

document.getElementsByName('q')[0].style.backgroundColor = 'blue';

Answer 3

использование document.getElementById('search').style.color = '#FFFFAA';