자바스크립트 html 속성 변경하는 방법 여러가지

자바스크립트를 이용하면 html 속성들을 동적으로 변경할 수 있다. 이미지를 변경시키거나 텍스트를 변경할 수도 있다. 특정 문자열을 숨기기 할 수도 있고 반대로 보여주기 할 수 있다. 이처럼 자바스크립트는 html 문서를 동적으로 동작할 수 있고, 사용자가 원하는 것을 할 수 있도록 해 준다.

자바스크립트와 html

html은 웹브라우저에서 볼 수 있는 웹문서이다.

자바스크립트는 웹문서인 html을 정적이 아닌 동적으로 움직이도록 해 준다.

대표적인 것이 이미지가 그렇고 문자의 형태를 변경하고 수정하는 것이 있다.

자주 사용되는 몇가지를 소개하면 다음과 같다.

문자열 텍스트 변경
문자열 텍스트 속성 값 변경
특정 요소를 숨기기, 보여주기
태그의 스타일 변경
이미지 변경

위의 몇가지를 코드로써 만들어 본다.

자바스크립트 대표적인 기능 코드

아마 아래의 코드를 보면 좀 이상할 것이다.

버튼 태그를 이용하여 버튼을 누르면 기능이 동작되도록 하였다.

onclick은 버튼이 클릭하면 이벤트가 발생하여 동작한다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트로 html 변경하기</h2>

        <p id="demo">
            자바스크립트로 html 를 변경할 수 있을까?
        </p>

        <button type="button" onclick="document.getElementById('demo').innerHTML = '안되긴 왜 안돼 변경됩니다.'">
            글자변경
        </button>
        <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
            글자크기변경
        </button>
        <button type="button" onclick="document.getElementById('demo').style.display = 'none'">
            글자숨기기
        </button>
        <button type="button" onclick="document.getElementById('demo').style.display = 'block'">
            글자보이기
        </button>

        <p>
            <img id="myImage" src="janedarc.png" style="width:200px">
        </p>
        <button onclick="document.getElementById('myImage').src='janedarc_alter.png'">
            이미지_1
        </button>
        <button onclick="document.getElementById('myImage').src='janedarc.png'">
            이미지_2
        </button>

    </body>
</html>

결과화면은 아래와 같다.

전체 6가지 기능이지만 하나씩 살펴보도록 한다.

이정도만 알아도 거의 모든 html 태그를 변경하는데 무리는 없을 것이다.

코드 살펴보기

전체적인 것보다 자바스크립트에 관한 것을 집중적으로 살펴보도록 한다.

중요한 것은 onclick 과 그것에 지정되어 있는 자바스크립트 내용이다.

관련된 부수적인 설명 또한 추가해 본다.

onclick
태그 속성으로 마우스 버튼을 클릭하면 이벤트가 발생한다.
이벤트는 onclick에 지정된 자바스크립트 구문이 실행된다.
document.getElementById(태그아이디값)
태그 아이디는 html 태그 마다 붙어있는 id 속성이다.
태그 아이디를 지정하면 html 태그에 접근하여 속성정보 등을 가져오거나 수정할 수 있다.
document.getElementById('demo').innerHTML
아이디로 지정된 곳의 문자열 컨텐츠를 변경한다.
document.getElementById('demo').style.fontSize
아이디로 지정된 곳의 css 스타일을 변경한다.
fontSize 는 문자열 컨텐츠의 폰트를 지정할 수 있다.
document.getElementById('demo').style.display
아이디로 지정된 태그를 화면에서 숨기거나 보여줄 수 있다.
또는 태그 속성을 변경하여 문단 또는 단어 속성으로 태그 속성을 변경할 수 있다.
document.getElementById('demo').src
이미지의 경우 화면에 보여질 이미지를 변경할 수 있다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag (0)	2021.09.10
자바스크립트 html 코드 작성 위치 javascript code in html (0)	2021.09.08
웹프로그래밍 자바스크립트란 기초 강좌와 튜토리얼 빠르게 보기 (0)	2021.09.05
자바스크립트 html 태그 생성하고 추가하기 createElement prepend javascript (0)	2021.06.26
javascript variable 자바 스크립트 변수 let 살펴보기 (0)	2021.03.23