PHELOX는 초보자부터 전문가까지 운영 예제가 포함된 포괄적이고 무료인 JavaScript 교육 시스템을 제공합니다.
자바 스크립트가 HTML 콘텐츠를 변경할 수 있음
많은 JavaScript HTML 메소드 중 하나는
getElementById()입니다.아래 예제는 HTML 요소(id="demo" 사용)를 "찾고" 요소 콘텐츠(innerHTML)를 "Hello JavaScript"로 변경합니다.
예시 1:
document.getElementById("demo").innerHTML = "자바스크립트 안녕하세요";JavaScript는 큰따옴표와 작은따옴표를 모두 허용합니다.
예시 2:
document.getElementById('demo').innerHTML = '자바스크립트 안녕하세요';JavaScript는 HTML 속성 값을 변경할 수 있습니다
이 예제에서 JavaScript는
<img> 태그의 src(소스) 속성 값을 변경합니다.
Download Codes:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="width:100%;text-align:center">
<img id="_lightblb" src="https://cdn.phelox.com/assets/uploads/pic_bulboff.gif"><br><br>
<input onclick="document.getElementById('_lightblb').src='https://cdn.phelox.com/assets/uploads/pic_bulbon.gif';" type="button" value="Turn on the light">
<input onclick="document.getElementById('_lightblb').src='https://cdn.phelox.com/assets/uploads/pic_bulboff.gif';" type="button" value="Turn off th light">
</div>
</body>
</html>