如何使用鼠标在页面上选择元素并将其隐藏在javascript中

我正在为chrome做一个测试扩展。 我的问题:

是否可以制作一个事件脚本，用鼠标选择一个元素并隐藏它？类似于按下

Shift+Ctrl+C

时的检查元素选择工具。注意：我不希望在之后进行DOM回流

这是我的密码：

content.js：

var elems = document.getElementsByTagName("iframe");

$(document).ready(function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    };
});

window.onload = function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    }
};

$(window).load(function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    };
});

for (var i = 0, max = elems.length; i < max; i++) {
    elems[i].hidden = true;
};

var elems=document.getElementsByTagName（“iframe”）；
$（文档）.ready（函数（）{
对于（变量i=0，max=elems.length；i

manifest.json：

{
  "manifest_version":2,
  "name":"Test",
  "description":"A Basic program",
  "version":"0.1",
  "background":{
     "scripts":[

     ]
  },
  "content_scripts":[
     {
        "matches":[
           "<all_urls>"
        ],
        "js":[
          "jquery-3.2.1.min.js",
          "content.js"
        ]
     }
  ],

  "browser_action":{
     "default_title":"Test"
   }
 }

{
“清单版本”：2，
“名称”：“测试”，
“说明”：“基本程序”，
“版本”：“0.1”，
“背景”：{
“脚本”：[
]
},
“内容脚本”：[
{
“匹配项”：[
""
],
“js”：[
“jquery-3.2.1.min.js”，
“content.js”
]
}
],
“浏览器操作”：{
“默认标题”：“测试”
}
}

选择元素的方法有很多种，隐藏元素的方法有很多种

首先，可以使用添加上下文菜单项

要处理关键和弦（如

SHFT+CTRL+C

），页面中需要一个背景脚本

在这种情况下，您可以操纵DOM来隐藏元素。使用

element.style.display='none'

折叠其周围的内容，或使用

element.style.opacity='0'

隐藏它，同时保持页面其余部分不变

查看您的源代码：

var elems = document.getElementsByTagName("iframe");

好的，这应该得到页面中所有的

标记，假设它们已经加载。默认情况下

下一步

$(document).ready(function() { ...
window.onload = function() { ...
$(window).load(function() { ...

这些似乎是不同的尝试，将其连接到已完成加载的文档。问题是

window.onload

可能（也可能不）已经启动。您可以强制内容脚本在

窗口之前运行。在
manifest.json
中使用
的“run\u at:”document\u end“
，onload

，但我认为这不是您想要的

请注意，它们都使用了从DOM中获得的带有内联脚本的

elems

变量，因此如果

在事件触发之前不存在，那么它就不会在数组中

最后，所有这些似乎都在尝试循环

s：

for (var i = 0, max = elems.length; i < max; i++) {
    elems[i].hidden = true;
};

---

我认为您的问题在于，当内容脚本运行时，您正在查找的

尚未出现在页面中。您可能需要针对您认为正在添加它们的特定事件添加检查。

谢谢您的回答，但您能否为我提供一个基本示例？@Vagif是的，但问题太模糊了。这是上下文菜单操作还是事件脚本？是否要在进行选择时禁用正常操作，是否要隐藏或删除元素？您想在之后再进行DOM回流吗？编辑了我的答案now@Vagif要避免DOM回流，请使用

element.style.opacity='0'

使元素完全透明，或者

element.style.visibility='hidden'

请提供一个示例？感谢您添加代码，希望这将有助于定义您的问题。然而，你想做什么还不清楚。是否希望在按下键盘快捷键时隐藏所选内容？从上下文菜单项？怎么用？即使代码看起来与您发布的代码相同，这读起来也像是请求我们编写代码，a）堆栈溢出并不是真正的目的，B）您的请求对于我们能够实际编写一些东西来说仍然很模糊。如果您希望我们调试您已经拥有的代码，那么：问题寻求调试帮助(“为什么这个代码不能按我想要的方式工作？”）必须包括：（1）所需的行为，（2）特定的问题或错误，（3）在问题本身中重现它所需的最短代码。请参见：，和。即使包含的代码是a，您仍然需要告诉我们#1（文本当前与代码不匹配）和#2。

function hideIframes() {
    const elems = document.getElementsByTagName('iframe');
    for (let e of elems) {
        e.style.visibility = 'hidden';
    };
}

// Don't do all of these - pick one that suits your context
hideIframes(); // Run inline on document_idle
$(hideIframes); // Run on jQuery complete
setTimeout(hideIframes, 3000); // Run again in 3s