2012-04-25 140 views
7

我目前正在一个项目,需要我有计算风格发送到浏览器通过JSDOM。我目前正在寻找一种方法来在JSDOM中注入一些基本的CSS,以便它能够计算出正确的内联样式(是的,我知道这很糟糕)。你怎么样式JSDOM

从我发现我可以使用JSDOM 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,但无济于事。而且我知道我也可以做上面的代码错误。

任何帮助将是伟大的。

+0

你见过这个** https://github.com/yonran/jsdom/blob/style/lib/jsdom/level2/style.js** – 2012-04-25 15:15:48

+0

我已经看到它,但我无法找出一种方法调用这些函数。 – Paul 2012-04-25 15:27:31

回答

11

那么,这是怎么回事听起来有点愚蠢的,但这个是我做过什么:

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 ,之后我添加了它。

它很简单,我希望它可以帮助别人。