http://www.mediaplayer.kr/main/bbs/html_editor.php

위 에디터에서 직접 확인하시면 더 좋습니다.

예를 들어서 하나의 div 등을 만들고 아이디를 하나 주고

엘레먼트의 형태가 바뀌는 아래의 이벤트를 주었습니다.

<div id=sir>그누보드</div>
<script>
sir.innerText = "비타주리";
sir.style.color = "#ff0000";
sir.style.padding = "10px";
sir.style.border = "1px solid #cccccc";
sir.style.borderRadius = "10px";
sir.style.textAlign = "center";
</script>

----------

이걸 with 블럭으로 감으면 코드가 상당히 매끈해 집니다.

<div id=sir>그누보드</div>
<script>
with (sir) {
    innerText = "비타주리";
    style.color = "#ff0000";
    style.padding = "10px";
    style.border = "1px solid #cccccc";
    style.borderRadius = "10px";
    style.textAlign = "center";
}
</script>

----------

아래처럼 사용해도 되겠지요.

with 블럭은 단순히 id 나 class 뿐만이 아니라 공통으로 엮인 부분은 모두 대상화 할 수 있습니다.

<div id=sir>그누보드</div>
<script>
sir.innerText = "비타주리";
with (sir.style) {
    color = "#ff0000";
    padding = "10px";
    border = "1px solid #cccccc";
    borderRadius = "10px";
    textAlign = "center";
}
</script>

----------

<div id=sir>그누보드</div>
<script>
with (sir) {
    innerText = "비타주리";
    with (style) {
        color = "#ff0000";
        padding = "10px";
        border = "1px solid #cccccc";
        borderRadius = "10px";
        textAlign = "center";
    }
}
</script>