편집용 iframe창에 스타일 지정하는 방법
프레임창에 스타일을 지정하기 위해서는 스타일 코드를 document.writｅ() 메소드를 사용하여 작성해야 한다. 스타일 선언부터 스타일 내용을 프레임창에 작성하는 방법으로 프레임창에 스타일을 지정한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- *************************************************************
편집 프레임을 두 개 생성하고, 하나는 기본 스타일을 정의하고
하나는 스타일을 정의 하지 않고 글을 써보자. 차이점을 알아보기
************************************************************** -->
<script type="text/javascript">
function initEditor(){
Editor0 = document.getElementById("styleIframe").contentWindow.document;
Editor1 = document.getElementById("normalIframe").contentWindow.document;
Editor0.designMode='on';
Editor1.designMode='on';
/* 편집 모드에 기본 스타일을 정의하기 */
Editor0.open();
Editor0.write("<html>");
Editor0.write("<head>");
Editor0.write("<style type=\"text/css\">")
Editor0.write("body { padding:0px; margin:5px; font-size:9pt; font-family:Dotum; }");
Editor0.write("td { font-size:9pt; font-family:Dotum; }");
Editor0.write("</style>");
Editor0.write("</head><body>");
Editor0.write("</body></html>");
Editor0.close();
}
</script>
<title>Insert title here</title>
</head>
<body>
<a href="#" onclick="initEditor();return false;"> 아이프레임을 편집모드로</a><br>
<iframe id="styleIframe"></iframe>
<iframe id="normalIframe"></iframe>
</body>
</html>
[결과] : 익스플로러6에서 나타난 결과
'Java Script & DOM > HTML DOM' 카테고리의 다른 글
| HTML DOM(Document Object Model)이란? (0) | 2009.09.22 |
|---|---|
| WYSIWYG(위지윅) 에디터 제작 기초 (0) | 2009.08.25 |
| 마우스 오버시 이미지가 계속 커지게 하는 방법 (0) | 2009.08.18 |
| DHTML(Dynamic HTML) 이란 (0) | 2009.06.30 |
| 편집용 iframe창에 작성된 내용 textarea로 복사 방법 (0) | 2009.06.09 |