javascript 如何禁用具有特定 id 模式的 div 块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8724893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable div blocks having a certain id pattern?
提问by T.J. Crowder
I would like to write a greasemonkey script to disable a div on a certain page.
On any given load of the page I don't know where in the DOM the div will be but I know it's always called <div id = "alertPanel"> ....</div>
我想编写一个greasemonkey 脚本来禁用某个页面上的div。在页面的任何给定负载上，我不知道 DOM 中 div 的位置，但我知道它总是被调用<div id = "alertPanel"> ....</div>
How would I go about disabling this div?
我将如何禁用这个 div？
My intial thoughts were something along the lines of:
我最初的想法是这样的：
var myDivs= document.getElementsByTagName('div');
for (i=0; i<myDivs.length; i++)
{
if (myDivs[i].<get id property somehow> = "alertPanel")
myDivs[i].style.visibility = 'hidden';
}
but as you can tell I'm stuck at accessing the id property for an equality check.
但正如您所知，我一直在访问 id 属性以进行相等性检查。
Incidently, I'm using a text editor to write this - I guessing that a standard javascript editor would give an autocompletion list after typing in myDivs[i].
顺便说一句，我正在使用文本编辑器来写这个 - 我猜标准的 javascript 编辑器会在输入后给出一个自动完成列表 myDivs[i].
回答by T.J. Crowder
If it has an id, you can use document.getElementById:
如果它有id，您可以使用document.getElementById：
var div = document.getElementById("alertPanel");
Then if it exists, you can either remove it (probably a bad idea) or hide it:
然后，如果它存在，您可以将其删除（可能是个坏主意）或隐藏它：
if (div) {
div.style.display = "none"; // Hides it
// Or
// div.parentNode.removeChild(div); // Removes it entirely
}
Update: Re your comment on another answer:
更新：重新您对另一个答案的评论：
thanks for your answer. Does your statemt apply to a page with iframes too. The div in question is in an iframe. I've tried ypur solution and it didn't work unfortunately. maybe a link to the page will help: tennis.betfair.com the div i want to disable is the one with id: minigamesContainer
感谢您的回答。您的 statemt 是否也适用于带有 iframe 的页面。有问题的 div 在 iframe 中。我已经尝试过 ypur 解决方案，但不幸的是它没有用。也许该页面的链接会有所帮助：tennis.betfair.com 我要禁用的 div 是带有 id 的 div：minigamesContainer
If the element is in an iframe, then you have to call getElementByIdon the document that's in the iframe, since iframes are separate windows and have separate documents. If you know the idof the iframe, you can use document.getElementByIdto get the iframeinstance, and then use contentDocumentto access its document, and then use getElementByIdon thatto get the "minigamesContainer" element:
如果元素在 an 中iframe，那么您必须调用getElementById中的文档iframe，因为iframes 是单独的窗口并具有单独的文档。如果你知道id的iframe，你可以用document.getElementById得到的iframe实例，然后用contentDocument访问其文件，然后使用getElementById上是得到了“minigamesContainer”元素：
var iframe, div;
iframe = document.getElementById("the_iframe_id");
if (iframe) {
try {
div = iframe.contentDocument.getElementById("minigamesContainer");
if (div) {
div.style.display = "none";
}
}
catch (e) {
}
}
(The try/catchis there because of a potential security error accessing the content of the iframe; I don't know Greasemonkey well enough to know whether the SOPapplies to it. I tend to assume it doesn't, but better safe...)
（这try/catch是因为访问 iframe 的内容存在潜在的安全错误；我不太了解 Greasemonkey，无法知道SOP是否适用于它。我倾向于认为它不适用，但更安全......）
If you don't know the idof the iframeor if it doesn't have one, you can just loop through all of them by getting them with document.getElementsByTagNameand then looping:
如果你不知道id的iframe，或者如果它没有一个，你可以通过所有这些循环是通过让与document.getElementsByTagName，然后循环：
var iframes, index, iframe, div;
iframes = document.getElementsByTagName("iframe");
for (index = 0; index < iframes.length; ++index) {
iframe = iframes[index];
try {
div = iframe.contentDocument.getElementById("minigamesContainer");
if (div) {
div.style.display = "none";
break;
}
}
catch (e) {
}
}
References:
参考：
回答by Māris Kise?ovs
In valid HTML you can have only element with certain ID. So:
在有效的 HTML 中，您只能拥有具有特定 ID 的元素。所以：
document.getElementById('alertPanel').style.visiblity = 'hidden';
But if you still need to iterate all div's and check their ID's, then this should work:
但是，如果您仍然需要迭代所有 div 并检查它们的 ID，那么这应该可以工作：
if (myDivs[i].id == "alertPanel") myDivs[i].style.visibility = 'hidden';
