Chrome擴展程序：顯示和隱藏元素？

Question

我正在嘗試隱藏在頁面上可見的按鈕，同時顯示另一個會自動隱藏的按鈕（兩個都在頁面上，我沒有添加新按鈕，只是更改了可見性）。

這是怎麼看起來像現在：

<div class="myAwesomeButtons"> 
    <button id="first_button" class="blue_button inset_button" style="">First</button> 
    <button id="second_button" class="green_button inset_button" style="display: none;">Second</button> 
    <button id="third_button" class="other_button">Third</button> 
</div> 

我試圖刪除第一個按鈕，取消對第二個按鈕style屬性。我如何在Chrome擴展中使用JavaScript來實現這一點？

我已經有我的manifest.json文件的順序，但我不知道如何去其餘的。

這是我嘗試過，但我不知道我做錯了什麼：

function fixButtons() { 
    document.getElementsByClassName("myAwesomeButtons")[0].style.visibility='hidden'; 
    document.getElementsByClassName("myAwesomeButtons")[1].style.visibility='visible'; 
} 

fixButtons(); 

Answer 1

function fixButtons() { 
    var buttonGroup = document.getElementsByClassName("myAwesomeButtons")[0].getElementsByTagName("button"); 
    buttonGroup[0].style.visibility='hidden'; 
    buttonGroup[1].style.visibility='visible'; 
} 

Answer 2

你是混合了display和visibility性能。

儘可能避免使用getElementsByClass，因爲它不適用於IE。我知道這是一個Chrome擴展，但它會工作。但是，由於每個按鈕都有一個ID，我只需要使用getElementById。

嘗試

function fixButtons() { 
    var button1 = document.getElementById("first_button"); 
    button1.style.display= "none"; 
    var button2 = document.getElementById("second_button"); 
    button2.style.display= "inline"; 
}