Published
Edited
May 4, 2019
1 fork
md`# CodePen 낮 밤 예제 여기로 옮겨보기`
html`<h2>다른 제목<h2> `
cell1 = html`
<div>
최상위
<div>
그냥 글자
<input id='night' type="button" value="밤">
<input id='day' type="button" value="낮">
</div>
<div>
두번째 자녀 div
</div>
</div>
`
cell1.tagName;
{
let doc = cell1; // doc은 cell1에 있는 최상위 div를 뜻함
let e = doc.querySelector('div'); // querySelector는 doc의 자녀들 중에서 선택
let nbtn = doc.querySelector('#night');
let dbtn = doc.querySelector('#day');
// 밤 버튼에 이벤트 핸들러 등록
nbtn.addEventListener(
'click',
function () {
e.style.color = 'white';
e.style.backgroundColor = 'blue';
} );
// 낮 버튼에 이벤트 핸들러 등록
dbtn.addEventListener(
'click',
() => {
e.style.color = 'black';
e.style.backgroundColor = 'yellow';
} );
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
