자바스크립트 속성 동적으로 수정, 변경하기

위 그림을 클릭하면 배경색이 파란색으로 변경, 수정 된다.

다음은 HTML5 소스코드이다.
우선 가로,세로 100px, 배경은 빨간색을 가진 div를 만든다. 클릭하면 myFunction()함수를 호출한다.

<div id="myid" style="width:100px;height:100px;background:red;" onclick="myFunction()">

다음은 자바스크립트 코드이다. 아래처럼 속성을 변경 및 수정할 수 있다.
변수 x에 ID가 'myid'인 div를 할당한다.
다음은  getAttributeNode 를 사용하여 배경색을 바꾸면 끝.

<script>
function myFunction() {
    var x = document.getElementById("myid");
    x.getAttributeNode("style").value = "width:100px;height:100px;background:blue;";
}
</script>

위와 같은 방법으로 클릭하면 이미지 파일이 변경, 수정되는 코드를 작성 할 수 있다.