如何将样式表添加到 JSDOM答案

【问题标题】：How do you add stylesheets to JSDOM如何将样式表添加到 JSDOM
【发布时间】：2012-05-06 07:04:51
【问题描述】：

我目前正在做一个项目，该项目需要我通过 JSDOM 将计算样式发送到浏览器。我目前正在寻找一种将一些基本 CSS 注入 JSDOM 的方法，以便它可以计算正确的内联样式（是的，我知道这很糟糕）。

根据我的发现，我可以使用 JSDOM Level 2，但是从那里我找不到任何关于如何注入样式的文档。

这是我目前所拥有的；

    var document = jsdom.jsdom('<!DOCTYPE html><html><head></head><body id="abody" ></body></html>', jsdom.level(2, 'style'), {
        features : {
            FetchExternalResources : ['script', 'css'],
            QuerySelector : true
        }
    });

我一直在将 css 插入到 head 标签中，但无济于事。而且我知道我也可能在上面的代码中做错了。

任何帮助都会很棒。

【问题讨论】：

你看过这个github.com/yonran/jsdom/blob/style/lib/jsdom/level2/style.js
我已经看到了，但我找不到调用这些函数的方法。

标签： css node.js jsdom

【解决方案1】：

好吧，这听起来有点愚蠢，但这就是我所做的：

    var path = require('path');
    var fs = require('fs');
    var mainCss = fs.readFileSync(path.normalize(__dirname + "web_main.css"), 'utf8');
    var document = jsdom.jsdom('<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html; charset=utf-8"><head></head><body id="abody" ></body></html>', jsdom.level(3, 'index'), {
        features : {
            FetchExternalResources : ['script', 'css'],
            QuerySelector : true
        }
    });     
    var window = document.createWindow();
    var head = document.getElementsByTagName('head')[0];
    style = document.createElement("style");
    style.type = 'text/css';
    style.innerHTML = mainCss;
    head.appendChild(style);

所以基本上我所做的只是将级别移动到 3 索引，而不是直接将它放在起始 html 中，而是在之后附加它。

它非常简单，我希望它可以帮助其他人。

【讨论】：