Chrome 扩展：显示和隐藏元素？答案

【问题标题】：Chrome Extension: Displaying & Hiding Elements?Chrome 扩展：显示和隐藏元素？
【发布时间】：2013-07-10 18:27:01
【问题描述】：

我目前正在尝试隐藏页面上可见的按钮，同时显示另一个自动隐藏的按钮（两者都在页面上，我没有添加新按钮，只是更改可见性）。

这就是现在的样子：

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

【问题讨论】：

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

标签： javascript html google-chrome-extension styles

【解决方案1】：

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

【讨论】：

【解决方案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";
}

【讨论】：