TypeScript with Web
DOM(문서 객체 모델)은 웹페이지 동작을 위한 하위 API 요소입니다.
그리고 TypeScript는 해당 API를 다루는
훌륭한 지원을 제공하고 있습니다.
상단 메뉴바에서 "Run"을 클릭했을 때
popover가 보일 수 있도록 구현해보겠습니다.
const popover = document.createElement("div");
popover.id = "example-popover";
const removePopover = () => {
const existingPopover = document.getElementById(popover.id);
if (existingPopover && existingPopover.parentElement) {
existingPopover.parentElement.removeChild(existingPopover);
}
};
// 이제 함수를 바로 실행해보겠습니다.
removePopover();
popover.style.backgroundColor = "#0078D4";
popover.style.color = "white";
popover.style.border = "1px solid black";
popover.style.position = "fixed";
popover.style.bottom = "10px";
popover.style.left = "20px";
popover.style.width = "200px";
popover.style.height = "100px";
popover.style.padding = "10px";
// 모호하거나, 더 이상 사용하지 않는 CSS 속성값을 포함합니다.
popover.style.webkitBorderRadius = "4px";
const message = document.createElement("p");
message.textContent = "Here is an example popover";
// 그리고 팝업을 닫는 버튼도 추가해보겠습니다.
const closeButton = document.createElement("a");
closeButton.textContent = "X";
closeButton.style.position = "absolute";
closeButton.style.top = "3px";
closeButton.style.right = "8px";
closeButton.style.color = "white";
closeButton.onclick = () => {
removePopover();
};
// 이제 페이지에 모든 요소들을 넣어보겠습니다.
popover.appendChild(message);
popover.appendChild(closeButton);
document.body.appendChild(popover);