如何使用Firebug查找CSS属性并使用Javascript更改它

Question

I am currently trying to change the color of the top search box background color on the SO page permanently on my web browser by writing a js script to be used with Greasemonkey. I don't have much experience with Javascript at all, but have not been able to figure out how to properly use Firebug to find out how to reference the particular attribute, which would then allow me to modify it. I have tried the following:

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

and the list of combinations go on, but figure that I am missing out on something fundamental with my Javascript referencing. My Greasemonkey definitely works as the alert() function works on the SO page.

Here is a snippet of the HTML code:

<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

Step by step:

1. Get the search form with: var searchForm = document.getElementById('search');

2. Get the input textbox, by using it's name (q): var searchBox = searchForm.q;

3. Set the color: searchBox.style.color = '#FFFFAA';

Or you can do all in one step:
document.getElementById('search').q.style.color = '#FFFFAA';

But please note that if you want to change background color you need to use:
document.getElementById('search').q.style.backgroundColor= '#FFFFAA';

As color changes text color not background.

Answer 2

Your script isn't working since you're looking for an ID on this page that does not exist.

Examining the markup for the SO page, it looks as follows:

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

Hence we can use the following:

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

Answer 3

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