Chrome扩展程序：显示和隐藏元素？

我正在尝试隐藏在页面上可见的按钮，同时显示另一个会自动隐藏的按钮（两个都在页面上，我没有添加新按钮，只是更改了可见性）。Chrome扩展程序：显示和隐藏元素？

这是怎么看起来像现在：

<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();

来源

2013-07-10 KingPolygon

按钮实际上是'myAwesomeButtons'类，而不是成员的'children'。 – DevlshOne

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

来源

2013-07-10 18:42:24 DevlshOne

你是混合了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"; 
}

来源

2013-07-10 18:56:33 dprogramz

Chrome扩展程序：显示和隐藏元素？

回答

相关问题