如何使用rvest获取HTML元素的CSS样式信息？

rvest仅能解析静态HTML内容，无法获取浏览器渲染后计算生成的CSS样式（比如字体族、颜色这类）——这类样式是浏览器加载CSS文件并应用到元素后得到的结果，不会直接存储在原始HTML中。要获取这类样式，需要借助能模拟浏览器渲染的工具，比如chromote包（基于Chrome DevTools协议，无需额外安装Selenium服务器）。

解决方案步骤 #

1. 安装依赖包 #

install.packages(c("chromote", "rvest"))

2. 编写代码获取计算样式 #

library(chromote)
library(rvest)

# 启动Chromote会话
b <- ChromoteSession$new()
# 打开谷歌首页
b$Page$navigate("https://www.google.com")
# 等待页面加载完成
b$Page$loadEventFired(wait_ = TRUE)

# 获取第7个input元素的计算样式
# 先通过DOM选择器找到元素的节点ID
element <- b$DOM$querySelector(b$DOM$getDocument()$root$nodeId, "input:nth-of-type(7)")
# 调用DevTools接口获取该节点的计算样式
computed_style <- b$CSS$getComputedStyleForNode(element$nodeId)

# 提取需要的样式属性示例
target_styles <- list(
  字体族 = computed_style$computedStyle$fontFamily,
  文字颜色 = computed_style$computedStyle$color,
  背景颜色 = computed_style$computedStyle$backgroundColor
)

print(target_styles)

# 关闭会话
b$close()

补充说明 #

• chromote会启动无头Chrome浏览器完成页面渲染，因此能获取到和浏览器审查工具中完全一致的计算后样式。
• 若需要更多样式属性，可直接查看computed_style$computedStyle的完整字段，其中包含了该元素所有生效的CSS属性。

内容的提问来源于stack exchange，提问作者joshbrows