Chrome扩展:显示&隐藏元素
Chrome Extension: Displaying & Hiding Elements?
我目前正在尝试隐藏页面上可见的按钮,同时显示另一个自动隐藏的按钮(两者都在页面上,我不添加新按钮,只是更改可见性)。
这就是现在的样子:
<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();
function fixButtons() {
var buttonGroup = document.getElementsByClassName("myAwesomeButtons")[0].getElementsByTagName("button");
buttonGroup[0].style.visibility='hidden';
buttonGroup[1].style.visibility='visible';
}
您正在混合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";
}
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 随时隐藏元素
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 隐藏元素直到加载完成(ng斗篷不是我需要的)
- 在具有类的元素中隐藏元素
- javascript()onclick隐藏元素-dos'我不在firefox工作
- JQueryHide()在按钮中使用元素时不会隐藏元素
- 使用Javascript取消隐藏元素
- 如果鼠标离开父对象,则隐藏元素
- 如何在jquery ajax成功html响应中找到输入隐藏元素
- 基于事件在循环中隐藏元素
- 渐进式增强-不使用CSS隐藏元素
- 隐藏元素后更新滚动条
- jQuery没有隐藏元素
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何使用javascript在区域外单击时隐藏元素
- 如何在加载网页时隐藏元素
- JS:隐藏元素上的事件侦听器
- HTML 显示/隐藏元素 JS 不起作用