๋ด๊ฐ ๋ญ๊ฐ ์๋ชปํ๊ณ ์์ต๋๊น, ์๋๋ฉด 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] }
์ฐธ๊ณ ๋ก ๋์ผํ ์์ ๋ํ ๋ธ๋ผ์ฐ์ ์ ๋์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
JSDOM์ ๊ณ๋จ์ ์ธ๋ผ์ธ ์คํ์ผ์ ๋ํ ์ง์์ด ์์ ํ ๋ถ์กฑํฉ๋๊น?
๊ทธ๊ฒ์ ์ฌ์ค์ ๋๋ค. ์์ง ์บ์ค์ผ์ด๋ฉ์ ์ ์ ํ๊ฒ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์๋ฌด ๊ฒ๋ ์์ฑํ์ง ์์์ต๋๋ค.
์... ์์ฒญ๋ ์์
๊ฐ๋์? ์คํ์ผ ์ฒ๋ฆฌ์ ๊ดํ ํ getComputedStyle()
์ ์คํ์ผ ๊ตฌ๋ฌธ ๋ถ์์ด ์๋ ๊ฒ์ฒ๋ผ ๋ณด์
๋๋ค. ์๋ฅผ ๋ค์ด ๋ธ๋ผ์ฐ์ ๋ ์์ ์์์ ์์์ ๋ํด rgb(255, 0, 0)
๋ฅผ ๋ฐํํ๊ณ jsdom์ red
๋ฅผ ๋ฐํํฉ๋๋ค.
์ด ๋ฌธ์ ๊ฐ ์ธ์ /์์ ๋ ์ง ์ ์ ์์ต๋๊น? JSDOM์ ๊ณ๋จ์ ๋ถ์กฑ์ผ๋ก ์ธํด ์๋ชป๋ ๊ฐ์ ๋ฐํํ๋ getComputedStyle ๋๋ฌธ์ ๋ด ํ ์คํธ๊ฐ ์คํจํ๊ณ ์์ต๋๋ค.