Jsdom: ์ธ๋ผ์ธ ์Šคํƒ€์ผ์˜ ๊ณ„๋‹จ์‹ ๋ฐฐ์—ด

์— ๋งŒ๋“  2016๋…„ 12์›” 28์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jsdom/jsdom

๋‚ด๊ฐ€ ๋ญ”๊ฐ€ ์ž˜๋ชปํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด JSDOM์ด ๊ณ„๋‹จ์‹ ์ธ๋ผ์ธ ์Šคํƒ€์ผ์— ๋Œ€ํ•œ ์ง€์›์ด ์™„์ „ํžˆ ๋ถ€์กฑํ•ฉ๋‹ˆ๊นŒ?

๊ฐ„๋‹จํ•œ ์˜ˆ:

var doc = jsdom.jsdom('<html><body><div style="color: red;"><div id="nested"></div></div></body></html>');
var win = doc.defaultView;
var el = doc.getElementById('nested');
console.log(win.getComputedStyle(el, ''));

์‚ฐ์ถœ:

CSSStyleDeclaration {
  '0': 'display',
  _values: { display: 'block' },
  _importants: { display: '' },
  _length: 1,
  _onChange: [Function] }

์ฐธ๊ณ ๋กœ ๋™์ผํ•œ ์˜ˆ์— ๋Œ€ํ•œ ๋ธŒ๋ผ์šฐ์ €์˜ ๋™์ž‘์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

https://jsfiddle.net/qxu1v1zc/

css feature

๋ชจ๋“  4 ๋Œ“๊ธ€

JSDOM์€ ๊ณ„๋‹จ์‹ ์ธ๋ผ์ธ ์Šคํƒ€์ผ์— ๋Œ€ํ•œ ์ง€์›์ด ์™„์ „ํžˆ ๋ถ€์กฑํ•ฉ๋‹ˆ๊นŒ?

๊ทธ๊ฒƒ์€ ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. ์•„์ง ์บ์Šค์ผ€์ด๋”ฉ์„ ์ ์ ˆํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์•„๋ฌด ๊ฒƒ๋„ ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์•—... ์—„์ฒญ๋‚œ ์ž‘์—… ๊ฐ™๋‚˜์š”? ์Šคํƒ€์ผ ์ฒ˜๋ฆฌ์— ๊ด€ํ•œ ํ•œ getComputedStyle() ์— ์Šคํƒ€์ผ ๊ตฌ๋ฌธ ๋ถ„์„์ด ์—†๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ธŒ๋ผ์šฐ์ €๋Š” ์œ„์˜ ์˜ˆ์—์„œ ์ƒ‰์ƒ์— ๋Œ€ํ•ด rgb(255, 0, 0) ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  jsdom์€ red ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๊ฐ€ ์–ธ์ œ/์ˆ˜์ •๋ ์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? JSDOM์˜ ๊ณ„๋‹จ์‹ ๋ถ€์กฑ์œผ๋กœ ์ธํ•ด ์ž˜๋ชป๋œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋Š” getComputedStyle ๋•Œ๋ฌธ์— ๋‚ด ํ…Œ์ŠคํŠธ๊ฐ€ ์‹คํŒจํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰