Стиль собственности и ценности - PullRequest
0 голосов
/ 06 ноября 2019

Я извлекаю имя и значения каждого элемента в HTML DOM. Для атрибута стиля, способного извлекать только имена свойств, а не значения.

Мой код указан ниже:

var elementHandles = await page.QuerySelectorAllAsync("a");
    foreach (var handle in elementHandles)
    {
        var elementStyle = await handle.GetPropertyAsync("style");
        var style = await elementStyle.JsonValueAsync();
        var output = style.ToString();
    }   

Это мой вывод:

{{
  "0": "font-family",
  "1": "font-size",
  "2": "line-height",
  "3": "color",
  "4": "text-align"
}}

Это то, чтоЯ ожидаю:

font-family:Arial, Helvetica, sans-serif; 
font-size: 12px; 
line-height: 16px; 
color: #999999;
text-align: left

1 Ответ

0 голосов
/ 06 ноября 2019

Проблема в том, как сериализуется CSSStyleDeclaration. Если именно так Chromium решит сериализовать этот объект, мы ничего не сможем там сделать.

Но мы можем попытаться решить это из JavaScript, используя EvaluateFunctionAsync.

foreach (var handle in elementHandles)
{
  var style = await page.EvaluateFunctionAsync<Dictionary<string, string>>(
    "e => Object.entries(e.style).filter(i => isNaN(i[0]) && i[1]).map(i => { return { [i[0]] : i[1]}}).reduce((acc, cur) => { return {...acc, ...cur}}, {})", handle);
  var output = style.ToString();
}

Давайтевзгляните на выражение javascript

e=> //We send the HTML element instead of the style property
  Object.entries(e.style) //We get all the property/value pairs from the CSSStyleDeclaration object
    // We want to exclude number properties (like 0,1,2) and empty values
    .filter(i => isNaN(i[0]) && i[1]) 
    //We turn them into objects
    .map(i => { return { [i[0]] : i[1]}})
    //We merge them into one single object that will be returned to C#
    .reduce((acc, cur) => { return {...acc, ...cur}}, {})
...