DOM CSS
HTML DOM을 사용하면 JavaScript가 HTML 요소의 스타일을 변경할 수 있습니다.
HTML 스타일 변경
HTML 요소의 스타일을 변경하려면 다음 구문을 사용하세요:
document.getElementById(id).style.property=새 스타일
다음 예에서는 <p> 요소의 스타일을 변경합니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
이벤트 사용
HTML DOM을 사용하면 이벤트를 트리거하여 코드를 실행할 수 있습니다.
예를 들어 다음 이벤트는
요소를 클릭합니다.
페이지가 로드되었습니다.
입력창이 수정되었습니다.
…
다음 장에서는 이벤트에 대해 자세히 알아봅니다.
이 예는 사용자가 버튼을 클릭할 때 id="id1"인 HTML 요소의 스타일을 변경합니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
더 많은 인스턴스
가시성
요소를 보이지 않게 만드는 방법. 요소가 나타나기를 원하시나요, 아니면 사라지기를 원하시나요?
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
