小技巧：捕获网页悬浮元素的三种参考思路😆

背景：

在最近的捕获元素的时候，我遇到了一个捕获悬浮的网页元素，我想要捕获这里的“CSS”文字元素

网址：如何使用HTML和CSS实现悬浮元素布局-html教程-PHP中文网

这个元素是悬浮的，在捕获的时候有困难，按照正常捕获方式会出现这样的效果：

效果：

这个指令捕获以后他并没有定位到我捕获的这个元素上，而是捕获到了后面这个图片上面。使用F7校验无法校验到CSS文字，而是校验到了后面这个图片。

那么我们该如何捕获这个元素呢？

思路一：修改元素属性，禁用JS，进行捕获

对于悬浮的元素，我们可以尝试通过修改网页元素style属性，让他变成显示状态。那么我们需要修改的这个style属性在哪里呢？我们可以通过按下F12来查看源码，然后选择需要悬浮的元素，然后仔细观察，看一下在右边代码的部分有没有一个元素在闪烁？

是这个元素哦，你观察到了吗？

对，这个style就是来控制这个页面元素的表现和外观的。我们只要把这个style属性变成空，然后按下回车Enter键，那么这个悬浮元素就变成了默认显示的效果。如下：

哇，现在元素已经显示出来了，快去捕获吧！

可恶，为什么还是不行！😫

不要着急，这是因为，在网页中还有一个东西他一直在“监听”你的鼠标移动，他就是JavaScript。他是来实现网页的动态行为，交互行为等。因此我们可以使用终极大法，在浏览器中将他禁止。

以谷歌浏览器为例，地址栏输入chrome://settings/content/javascript

然后点击“不允许网站使用 JavaScript”

此时，我们再回到原来的页面并刷新。我们发现此时当你鼠标移动的时候，悬浮的元素也无法显示出来了，我们可以通过刚才的方法找到style属性，并将他设置为空，然后尝试捕获。

哇，终于捕获成功啦！😆

元素捕获成功以后，记得把JS禁用设置解除哦！

这个解决问题的思路就是，找到要修改的style-->禁用JS--->修改style--->捕获元素。

思路二：XPath定位法

思路：找到CSS这个文字元素背后HTML代码--->复制xpath--->使用xpath定位

1. 找到元素背后的HTML代码

我们先按照正常的思路，按下F12然后点击选择试试看

我们发现在选择的状态下网页无法交互，因此也无法直接通过点选的方式找到CSS这个文字。

那么我们该如何捕获呢？大家可以看一下这里

我们发现选择网页元素有一个快捷键Ctrl+Shift+C

所以，我们可以先点击找到CSS文字这个元素，然后按下这个快捷键，就可以点击找到这个元素的HTML代码标签，然后复制xpath

之后配合获取元素对象的方式来获取元素就可以了。

思路三：快捷键巧妙操作

正常我们在捕获元素的时候按照提示是按下Ctrl+Shift+单击

但是对于这个页面，当按下Ctrl的时候，这个元素就会消失导致元素捕获不到。

我们只需要先按下Shift键，然后再按下Ctrl键，再点击单机就可以捕获到了！✌️

------------------------------------

莫莫

影刀社区团队

邮箱：momo@yingdao.com

官网：https://www.yingdao.com/

最好的社区环境是一群超级棒的开发者！