JavaScript HTML Content, Attribute, CSS 제어하기

JavaScript를 사용하여 HTML 컨텐츠, 속성, 그리고 CSS를 제어하는 방법에 대해 알려드리겠습니다.

HTML Content 제어

HTML 요소의 내용을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElementById 메서드를 사용하며, 변경할 내용은 innerHTML 속성을 통해 지정합니다. 예를 들어, ID가 "demo"인 요소의 내용을 "Hello World!"로 변경하려면 다음과 같이 작성합니다.

document.getElementById("demo").innerHTML = "Hello World!";

HTML Attribute 제어

HTML 요소의 속성을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElementById 메서드를 사용하며, 변경할 속성은 해당 속성의 이름을 통해 지정합니다. 예를 들어, ID가 "myImage"인 img 요소의 src 속성을 "hello_world.gif"로 변경하려면 다음과 같이 작성합니다.

<img id="myImage" src="my_image.gif" style="width:100px">

document.getElementById('myImage').src="hello_world.gif";

CSS 제어

CSS 속성을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElementById 메서드를 사용하며, 변경할 속성은 해당 속성의 이름을 통해 지정합니다. 예를 들어, ID가 "demo"인 요소의 글자 크기를 35px로 변경하려면 다음과 같이 작성합니다.

document.getElementById("demo").style.fontSize = "35px";

이상으로 JavaScript를 사용하여 HTML 컨텐츠, 속성, 그리고 CSS를 제어하는 방법에 대해 설명해드렸습니다. 감사합니다!