css 如何向JSDOM添加样式表

ruarlubt 于 2023-02-20 发布在其他

关注(0)|答案(2)|浏览(199)

我目前正在做一个项目，需要我通过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标签中，但是没有用。我知道我也可能把上面的代码做错了。
任何帮助都很好。

css

来源：https://stackoverflow.com/questions/10318330/how-do-you-add-stylesheets-to-jsdom

2条答案

按热度按时间

gtlvzcf81#

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

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中，我在后面附加了它。
这很简单，我希望它能帮助别人。

赞(0）回复(0）举报 2023-02-20

ykejflvf2#

溶液-序言

似乎Op 's Answer_post的解决方案是：

直接将样式复制粘贴到<style>中。*

如果您的问题是：
***如何让Jsdom加载（/为什么Jsdom不加载）html文件中的外部css样式表链接？**（例如：（x月1日至1x日）

以下内容可能会有所帮助：

溶液

- 有一个html文件，比如main_test.html。
main_test.html包含<link href="main_test.css" rel="stylesheet" />--这是您想要的样式表
@注：

如果main_test.html没有它
&如果您想在运行时添加这个，也许您可以：：

将此行作为字符串附加到html文件，&
将html字符串（因此，不是fromFile()）解析为Jsdom
使用**resources: 'usable'**将html文件加载到Jsdom中

dom = await JSDOM.fromFile(pathStr_htmlFile, {
    contentType: 'text/html; charset="utf-8"',
    resources: 'usable',
  });

在访问它们之前，请确保等待css样式表完全加载。

参考

[Can'不加载外部css] https://github.com/jsdom/jsdom/issues/1927

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何向JSDOM添加样式表

2条答案

溶液-序言

溶液

参考

相关问题

热门标签

最新问答