javascript - 如何找出隐藏/作用于 html 元素的内容

Question

我有一个简单的<a>标签被一些 JS 隐藏。（display:none）我查看了页面源代码，我可以看到它没有隐藏，但是检查器将其显示为 display:none （内联样式）

在 JS 代码中找出类/id 以隔离隐藏<a>.

是否有工具或固定程序可以帮助我进行调试？

Answer 1

Chrome 允许您在元素的属性发生更改时中断代码。

1. 使用 F12 打开开发人员工具，然后选择“元素”选项卡。找到隐藏的元素。右键单击它，“中断”，“属性修改”。

2. 刷新页面，保持开发者工具打开。

如果该元素正在使用 JavaScript 隐藏，那么您将在此时中断。

否则，它是通过 CSS 完成的。如果是这种情况，请再次使用“元素”选项卡，选择您感兴趣的元素，然后在右侧列中查看应用于它的“样式”。Chrome 将显示在哪个样式表中哪个定义应用了哪些样式。然后找到隐藏元素的那个应该是微不足道的。

Answer 2

首先，看看它是否被内联样式或css类隐藏。

然后，如果是一个 css 类，则在您的所有项目中搜索该类（您应该找到一个将此类添加到元素的 javascript 函数）。

如果被内联样式属性隐藏，请在项目内部查找任何.style.display =属性。

如果您使用的是 jquery，请尝试这样：

// Search by class
.addClass(".hiddenClass

// Search by css
.hide(), or $(".elementSelector").hide()

Answer 3

首先确保隐藏元素的确实是javascript，因为它很容易是css。最简单的第一步是检查元素，看看它的默认 css 是否隐藏了它。

第二。您的 js 代码是在一个文件中还是在页面中导入了多个 js 文件？如果你有多个 js 文件，你可以试试。

导入 1 个文件，然后使用 javascript 显示您的元素，然后导入其余文件。

如果隐藏您的元素的代码位于第一个文件中，那么您的元素将是可见的（因为您在首先隐藏它之后使其可见）如果元素不可见，则意味着隐藏发生在后续文件中。在第二次导入后移动显示元素的 javascript 代码，依此类推...

最后但并非最不重要的一点是确保您的代码也不会导入外部 css 文件。

我建议您使用 Chrome 开发工具进行任何 javascript 调试。