[英]How to use Firebug to find CSS attribute and change it using Javascript
我目前正在尝试通过编写与Greasemonkey一起使用的js脚本,永久地在我的Web浏览器上更改SO页面上顶部搜索框背景颜色的颜色。 我根本没有很多Javascript经验,但是无法弄清楚如何正确使用Firebug来找出如何引用特定属性,然后允许我修改它。 我尝试过以下方法:
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>
一步步:
获取搜索表单: 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';
由于颜色改变文本颜色而不是背景。
您的脚本无法正常工作,因为您在此页面上查找的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';
使用document.getElementById('search').style.color = '#FFFFAA';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.