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

我目前正在嘗試通過編寫與Greasemonkey一起使用的js腳本來在Web頁面上永久更改SO頁面上頂部搜索框背景顏色的顏色。我根本沒有太多的Javascript經驗，但一直未能弄清楚如何正確使用Firebug來找出如何引用特定的屬性，這將允許我修改它。我曾嘗試以下：如何使用Firebug查找CSS屬性並使用Javascript更改它

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>

來源

2011-12-23 chuckus

你能添加的元素對應的HTML片段你想要解決？ –

由於您在此頁面上查找不存在的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';

來源

2011-12-23 09:22:00 f0x

感謝您的幫助！ – chuckus

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

來源

2011-12-23 09:21:14 Dau

步驟由步驟：

獲取搜索形式： var searchForm = document.getElementById('search');
獲取輸入文本框使用它的名字（Q）： var searchBox = searchForm.q;
設置顏色： searchBox.style.color = '#FFFFAA';

或者你可以做一個步驟：
document.getElementById('search').q.style.color = '#FFFFAA';

但請注意，如果你想改變背景顏色您需要使用：
document.getElementById('search').q.style.backgroundColor= '#FFFFAA';

由於顏色改變文字顏色而不是背景。

來源

2011-12-23 09:21:31 enoyhs

謝謝！沒有意識到你可以使用該名稱作爲參考元素 – chuckus

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

回答

相關問題