从 HTML 元素背景中解析样式丢失答案

【问题标题】：Parse Style from HTML element background missing从 HTML 元素背景中解析样式丢失
【发布时间】：2017-06-24 20:18:56
【问题描述】：

我完全被难住了。我正在使用 VBA 的 Internet Explorer 对象解析谷歌图像搜索的 HTML。当我使用 Chrome 的内置工具检查元素时，我得到的 HTML 如下所示：

<a href="/imgres?imgurl=...&amp;imgrefurl=...&amp;docid=...&amp;tbnid=...&amp;vet=...&amp;w=1366&amp;h=768&amp;bih=638&amp;biw=1366&amp;q=cats&amp;ved=...;iact=mrc&amp;uact=8" jsaction="fire.ivg_o;mouseover:str.hmov;mouseout:str.hmou" class="rg_l" rel="noopener" style="background: rgb(200, 190, 194); width: 270px; height: 168px; left: 0px;"><img class="rg_ic rg_i" data-sz="f" name="z7O-qKoPKHzyaM:" alt="Image result for cat's" jsaction="load:str.tbn" onload="google.aft&amp;&amp;google.aft(this)" src="data:image/jpeg;base64,/9j/4AAQ..." style="width: 300px; height: 168px; margin-left: -15px; margin-right: -15px; margin-top: 0px;"><div class="_aOd rg_ilm"><div class="rg_ilmbg"><span class="rg_ilmn"> 1366&nbsp;×&nbsp;768 - wallpapercave.com </span></div></div></a>

或者作为图片（抱歉，不知道如何格式化）

样式集中有一个“背景”值，我想得到它。但是我似乎无法在任何地方找到它。当我使用 Chrome 的检查工具浏览“属性”时，没有“样式”选项可供查看。 InnerHTML 不包含一些样式元素，但不包含“背景”。并通过 VBA

HTMLelement.getAttribute("Background") = ""
HTMLelement.Style.Background = ""
HTMLelement.Style.BackgroundColor = ""

这是怎么回事，为什么我在使用网页检查器的时候可以看到一个背景属性，但是通过上面的方法却不能访问呢？

【问题讨论】：

@GustafGunér 没有使用 JS，这是一个 VBA 应用程序（我猜它使用了一些对面向对象语言通用的方法）。作为总结，我将一个名为objIE 的InternetExplorer.Application 导航到谷歌图片页面，等待它加载，然后：Set elem = objIE.document.getElementById("rg_s").getElementsByTagName("IMG")(0).ParentElement 其中elem 是我在问题中提到的IHTMLElement（我传播了它多行，但就是这样）

标签： html css vba

【解决方案1】：

为此，可以使用目标anchor 元素的getAttribute("style") 方法。然后style 是IHTMLStyle 类型，它具有background 颜色的字符串属性。高温

Option Explicit

' Add reference to Microsoft Internet Controls (SHDocVw)
' Add reference to Microsoft HTML Object Library

Const url As String = "your-url-here"

Sub GetInlineStyle()
    Dim ie As SHDocVw.InternetExplorer
    Dim doc As MSHTML.HTMLDocument

    Debug.Assert Trim(url) <> ""
    Set ie = New SHDocVw.InternetExplorer
    ie.Visible = True
    ie.navigate url

    While ie.Busy Or ie.readyState <> READYSTATE_COMPLETE
        DoEvents
    Wend

    Set doc = ie.document

    ' Get target anchor element which contains the background color
    Dim anchor As HTMLAnchorElement
    Set anchor = doc.querySelector("a[class=rg_l]")

    ' Use getAttribute("style") to get style of anchor
    Dim style As IHTMLStyle
    Set style = anchor.getAttribute("style")

    ' IHTMLStyle has string property backgroundColor
    Dim bgrColor As String
    bgrColor = style.backgroundColor
    Debug.Print bgrColor

    ie.Quit
End Sub

输出

rgb(200, 190, 194)

使用的 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!-- saved from url=(0016)http://localhost -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Stackoverflow Greedo</title>
</head>

<body>
    <div class="content">
        <a href="https://stackoverflow.com" class="rg_l" rel="noopener" 
            style="background: rgb(200, 190, 194); width: 270px; height: 168px; left: 0px">
            Stackoverflow Greedo    
        </a>
    </div>
</body>

</html>

【讨论】：

嗯，在使用 this 图像搜索时为 style.backgroundColor 返回 "" - 即使 anchor 确实指向页面上的正确元素。我使用了 IE 检查器而不是 Chrome 浏览器，并且没有发现 background 属性的痕迹。这导致了 2 个猜测；首先，该属性是 chrome 独有的，其次，一旦加载图像，某些 ajax 脚本会在 IE 中删除该属性。除非您能想到如何在 IE 中获取数据，否则我可能不得不使用 Selenium？
@Greedo 现在提供的链接很好，我可以完全理解您的问题:)。但是正如您所写，在 IE 中没有这样的内联样式。所以style.backgroundColor 的结果是正确的，我对此无能为力:(.