样式 属性 和值
Style Property and Values
我正在提取 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
问题是 CSSStyleDeclaration
是如何序列化的。如果这就是 Chromium 决定序列化该对象的方式,那么我们无能为力。
但是,我们可以尝试使用 EvaluateFunctionAsync
从 javascript 开始解决这个问题。
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}}, {})
我正在提取 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
问题是 CSSStyleDeclaration
是如何序列化的。如果这就是 Chromium 决定序列化该对象的方式,那么我们无能为力。
但是,我们可以尝试使用 EvaluateFunctionAsync
从 javascript 开始解决这个问题。
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}}, {})