如何使用Firebug查找CSS屬性並使用Javascript更改它

Question

我目前正在嘗試通過編寫與Greasemonkey一起使用的js腳本，永久地在我的Web瀏覽器上更改SO頁面上頂部搜索框背景顏色的顏色。 我根本沒有很多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';