You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Python Selenium如何实现Chrome元素复制样式获取原始CSS规则

需求背景

在Chrome浏览器中,手动右键选中元素后选择copy > copy styles即可复制元素样式,现需通过自动化方式实现完全同等效果:获取结果必须和手动复制内容完全一致,保留原始CSS规则中的动态值,例如保留20vw这类动态单位值,而非返回转换后240.6px这类固定计算值。

手动复制样式操作示例

已验证的无效方案

此前测试的多种实现方案均不符合需求:

  • 常规获取元素指定CSS值的方案:仅能获取元素计算后样式,会丢失原始动态值,无法满足需求。
  • 遍历元素属性的JS注入方案:在测试页面选取CSS选择器为body > div.container > div > div > div:nth-child(3) > label的元素,赋值给elementSelectedWithCssSelector变量后,执行如下代码:
    var items = {}; 
    for (index = 0; index < arguments[0].attributes.length; ++index) { 
        items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value 
    }; 
    return items;
    
    最终仅返回{'for': 'link'},未得到预期的CSS规则。
  • 读取元素style属性的方案:调用elementSelectedWithCssSelector.get_attribute("style.cssText")尝试获取样式,返回结果为空。
  • 其他公开的JS获取样式方案:测试后均仅能获取computed styles计算样式,存在前述动态值被转换的问题。
待解决的疑问

任意可实现与Chrome手动copy > copy styles返回结果一致、无动态值丢失问题的方案均可,具体疑问如下:

  • 是否可优先通过Selenium或其他自动化工具,实现Chrome的copy > copy styles功能自动化调用?
  • 是否可通过开发Chrome扩展的方式,调用浏览器内置的copy > copy styles能力获取对应CSS规则?
  • 是否存在其他可获取元素全部原始样式规则的方案?注:仅返回computedStyle计算样式的方案不符合需求,因存在动态值转换问题
  • 是否可通过Selenium的get_attribute方法获取元素原始CSS规则?

内容的提问来源于stack exchange,提问作者Farhang Amaji

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 08:31:08