设置元素样式

📖 节点概述

直接修改网页元素的 CSS 样式或类名，能够动态改变页面的外观。支持批量操作所有匹配的元素，可设置内联样式文本、修改单个 CSS 属性、添加/移除/切换类名，甚至完全移除内联样式。常用于高亮关键信息、显示隐藏元素、调整布局以适应自动化操作。

💡 使用场景：

• 高亮定位的元素：在执行操作前给元素添加红色边框，方便调试时观察。
• 强制显示隐藏内容：移除 display:none 或添加 display:block !important，让原本隐藏的菜单或选项可见。
• 模拟 UI 状态：添加 active、disabled 等类名，触发前端框架的状态样式，绕过复杂的交互逻辑。
• 修复遮挡问题：调整元素的 z-index 或 position，避免被其他层挡住而无法点击。
• 批量美化截图：在截图前将所有匹配的元素背景设为白色、字体放大，使截图更清晰。

🎮 实战连线指南：如何正确使用它？

节点默认对当前活动标签页操作，也可指定 Tab。需要提供一个元素定位器（支持备选定位列表）。通过“操作模式”选择修改方式，然后填写相应的样式属性或类名。如果勾选“应用到所有匹配元素”，则会批量修改所有满足选择器的元素。

场景案例：强制显示一个被隐藏的“高级选项”面板

1. 定位面板：使用【智能定位元素】获取隐藏面板的 CSS 选择器，比如 .advanced-options。
2. 设置样式：操作模式选择“设置样式文本”。在“样式文本”输入框中填写 display: block !important;，并勾选“覆盖现有样式”以确保旧的 display:none 被替换。
3. 保留原始样式（可选）：如果需要后续恢复，可勾选高级选项中的“保留原始样式以便恢复”，节点会保存修改前的样式到上下文中。
4. 串联执行：将前一个步骤的 Exec 输出连接到本节点的 Exec 输入。执行后面板就会显示出来，之后就可以继续点击里面的选项了。

场景案例：给所有待办事项中的已完成项添加删除线

1. 定位元素：假设完成项都有类名 .todo-item.completed，使用选择器 .todo-item.completed。
2. 批量添加类名：操作模式选择“添加类名”，在“类名”输入框中填写 line-through（假设该样式类已在页面中定义），并确保“应用到所有匹配元素”是开启的。
3. 执行：所有已完成的待办项文字都会出现删除线。

场景案例：通过设置单个属性来改变背景色

1. 操作模式：“设置单个属性”。
2. 填写属性：在“属性名”中填 backgroundColor，在“属性值”中填 #ffffcc（浅黄色）。
3. 应用：所有匹配的元素背景都会变为浅黄色，常用于在循环操作时临时标记当前处理的元素。

与 iframe 配合：如果目标元素位于 iframe 内，可以在高级选项中填写 iframe 的索引（从 0 开始），节点会自动跨域注入样式。

⚙️ 引脚与参数说明

📥 输入引脚

⚙️ 控件参数

📤 输出引脚

💎 小贴士：

• 修改样式只是前端视觉变化，不会触发后端逻辑，可以安全地用于调试。
• 使用“切换类名”配合前端框架的状态类（如 .is-disabled）可以轻松切换交互状态。
• 如果修改后页面没有刷新，可能因为元素是动态生成的，请配合“等待元素出现”节点使用。
• 如果需要恢复原始样式，请开启“保留原始样式”，之后可通过再次调用本节点并传入备份的样式文本来还原。
• 跨域 iframe 中的样式修改需要正确指定 iframe 索引，并确保目标元素在修改时已加载完成。