Question

我做了一些研究，发现了一种在JavaScript中获取伪选择器样式的方法。我们可以这样做，如下所示。

cssRules = window.getMatchedCSSRules(node, 'first-line')

但是当我在phantomJS中使用相同的内容时，它会返回节点本身的css规则，忽略伪选择器的规则。

如何获得伪选择器的css规则？

示例：

HTML CODE

<html>
<head>
    <style>
        #fl::first-line{
            color : red;
        }
        #fl{
            color : yellow;
        }
    </style>
</head>
<body>
    <div id = 'fl'>Convert this</div>
    <div id = 'data'></div>
</body>

JAVASCRIPT

var node = document.getElementById('data');
var target = document.getElementById('fl')
console.log(window.getMatchedCSSRules(target, 'first-line')[0].style.color);

在网络浏览器上，我输出为红色，但在phantomJS中，我输出为黄色。

Answer 1

这似乎没有在PhantomJS 1.9.7中实现，但在PhantomJS 2.0.0中按预期工作：

var page = require('webpage').create();

var url = 'http://example.com';

page.open(url, function(){
    console.log(JSON.stringify(page.evaluate(function(){
        document.head.innerHTML = "<style>body::first-line{color : red;}body{color : yellow;}</style>";
        return {
            parent: getMatchedCSSRules(document.querySelector("body")),
            pseudo: getMatchedCSSRules(document.querySelector("body"), "first-line")
        };
    }), undefined, 4));
    phantom.exit();
});

输出：

{
    "parent": {
        "0": {
            "CHARSET_RULE": 2,
            "FONT_FACE_RULE": 5,
            "IMPORT_RULE": 3,
            "MEDIA_RULE": 4,
            "PAGE_RULE": 6,
            "STYLE_RULE": 1,
            "UNKNOWN_RULE": 0,
            "WEBKIT_KEYFRAMES_RULE": 7,
            "WEBKIT_KEYFRAME_RULE": 8,
            "WEBKIT_REGION_RULE": 16,
            "cssText": "body { color: yellow; }",
            "parentRule": "",
            "parentStyleSheet": "",
            "selectorText": "body",
            "style": {
                "0": "color",
                ...
                "clipRule": "",
                "color": "yellow",
                "colorInterpolation": "",
                "colorInterpolationFilters": "",
                "colorProfile": "",
                "colorRendering": "",
                "content": "",
                ...
                "zoom": ""
            },
            "type": 1
        },
        "item": {},
        "length": 1
    },
    "pseudo": {
        "0": {
            "CHARSET_RULE": 2,
            "FONT_FACE_RULE": 5,
            "IMPORT_RULE": 3,
            "MEDIA_RULE": 4,
            "PAGE_RULE": 6,
            "STYLE_RULE": 1,
            "UNKNOWN_RULE": 0,
            "WEBKIT_KEYFRAMES_RULE": 7,
            "WEBKIT_KEYFRAME_RULE": 8,
            "WEBKIT_REGION_RULE": 16,
            "cssText": "body::first-line { color: red; }",
            "parentRule": "",
            "parentStyleSheet": "",
            "selectorText": "body::first-line",
            "style": {
                "0": "color",
                ...
                "clipRule": "",
                "color": "red",
                "colorInterpolation": "",
                "colorInterpolationFilters": "",
                "colorProfile": "",
                "colorRendering": "",
                "content": "",
                "counterIncrement": "",
                "counterReset": "",
                "cssText": "color: red;",
                ...
                "zoom": ""
            },
            "type": 1
        },
        "item": null,
        "length": 1
    }
}

请注意，PhantomJS不返回数组，而是返回带有整数键的对象，因此您需要以这种方式访问它：

getMatchedCSSRules(el, "first-line")["0"].style.color

而不是

getMatchedCSSRules(el, "first-line")[0].style.color

获取PhantomJS中节点的伪选择器样式

1 个答案: