影刀RPA分享151期|伪元素操作实战：获取文本与display属性（附8bo.com实操案例）

和小可耐学RPA机器人

2025-11-19

导读：希望和大家交朋友关注我，一起成长~在网页数据采集场景中，伪元素（:before/:after）渲染的文本或样式属性常难以直接捕获，而影刀RPA结合自定义JS代码可高效解决这一问题。

希望和大家交朋友

关注我，一起成长~

在网页数据采集场景中，伪元素（:before/:after）渲染的文本或样式属性常难以直接捕获，而影刀RPA结合自定义JS代码可高效解决这一问题。本文结合8bo.com足球赛事数据页面案例，详细拆解伪元素:before文本获取与:after display属性获取的完整流程，搭配参考视频教程，助力快速上手。

网站如下

https://8bo.com/football/info-list/12661320-5-1?code=302

一、实战基础：伪元素操作核心原理

伪元素是CSS渲染的虚拟元素，并非DOM树直接节点，无法通过常规元素定位获取其内容或属性。影刀RPA支持嵌入自定义JavaScript代码，借助window.getComputedStyle方法读取伪元素的计算样式，从而提取目标信息。本文将基于两个核心需求展开：一是获取伪元素:before的文本内容，二是获取伪元素:after的display属性值。

二、实战一：获取伪元素:before的文本（以8bo.com为例）

1. 应用场景

8bo.com的足球赛事赔率页面中，部分赛事状态、附加说明等文本可能通过伪元素:before渲染，常规元素捕获工具无法直接提取，需通过自定义代码实现。

2. 核心代码解析

用户提供的代码可直接用于获取:before伪元素的文本内容：

function (element, input) {
    return window.getComputedStyle(element,"before").content;
}

window.getComputedStyle
：用于获取元素的计算样式，包含伪元素的渲染信息。
第一个参数element：影刀RPA定位到的目标DOM元素（需提前在页面中选中）。
第二个参数"before"：指定要获取的伪元素类型（此处为:before）。
.content
：获取伪元素的文本内容（CSS中通过content属性定义）。

3. 8bo.com实操步骤

打开影刀RPA，新建网页自动化流程，配置8bo.com赛事数据页面（https://8bo.com/football/info-list/12661320-5-1?code=302）。
用影刀的元素定位工具，选中需要提取:before文本的目标元素（如赔率状态标签、附加说明容器）。
在流程中添加“执行自定义JavaScript”组件，粘贴上述核心代码，将代码中的element与定位到的目标元素关联。
运行组件，即可返回伪元素:before渲染的文本内容（如赛事状态说明、附加标记等）。

三、实战二：获取伪元素:after的display属性值

1. 应用场景

伪元素:after常用于渲染图标、状态标识等，其display属性（如block、none）可反映元素的显示状态（例：赛事是否可投注、数据是否更新），需精准捕获以辅助数据判断。

2. 核心代码解析

针对:after的display属性，用户提供的专用代码如下：

var curNumStr = getComputedStyle(document.querySelector('#contentDiv'), ':after').display;

document.querySelector('#contentDiv')
：通过CSS选择器定位目标元素（此处以#contentDiv为例，需替换为实际元素ID/类名）。
':after'
：指定伪元素类型为:after。
.display
：获取伪元素的display属性值（返回结果如"block"、"none"、"inline"）。
变量curNumStr用于存储结果，可直接在影刀流程中调用该变量。

3. 适配8bo.com的调整要点

打开8bo.com目标页面，通过浏览器“开发者工具”（F12）定位包含:after伪元素的目标元素，获取其准确选择器（如ID、类名、层级关系）。
将代码中的#contentDiv替换为实际选择器（例：若元素类名为odds-after，则改为.odds-after）。
在影刀RPA中添加“执行自定义JavaScript”组件，粘贴修改后的代码，运行后即可获取:after的display属性值，用于后续逻辑判断（如显示则执行采集，隐藏则跳过）。

四、关键注意事项

元素选择器必须精准：需通过浏览器开发者工具确认目标元素的真实选择器，避免因选择器错误导致无法获取伪元素信息。
伪元素依赖CSS加载：确保页面完全加载后再执行代码，可在影刀流程中添加“等待元素出现”“等待页面加载完成”组件。
结合参考视频学习：B站教程（https://www.bilibili.com/video/BV1ZpynBPE2K/）包含伪元素获取的实操演示，可对照视频掌握影刀RPA组件配置、元素定位的细节。
代码兼容性：上述代码基于标准JS语法，适配主流浏览器（Chrome、Edge），无需额外修改即可在影刀RPA中运行。