HTML ID 속성
예시
id 속성을 사용하여 JavaScript로 텍스트를 조작하십시오.
<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult()
{
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
id속성은 HTML 요소의 고유 ID를 지정합니다(값은 HTML 문서 내에서 고유해야 함) .
속성 은 id스타일 시트의 스타일을 가리키는 데 가장 많이 사용되며 JavaScript(HTML DOM을 통해)는 특정 ID를 가진 요소를 조작하는 데 가장 많이 사용됩니다.
브라우저 지원
| Attribute | |||||
|---|---|---|---|---|---|
| id | Yes | Yes | Yes | Yes | Yes |
통사론
<element id="id">
속성 값
| Value | Description |
|---|---|
| id | Specifies a unique id for the element.
Naming rules:
|
더 많은 예
실시예 1
id 속성을 사용하여 페이지 내에서 지정된 id를 가진 요소에 연결합니다.
<html>
<body>
<h2><a id="top">Some heading</a></h2>
<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>
<a href="#top">Go to top</a>
</body>
</html>
실시예 2
id 속성을 사용하여 CSS로 텍스트 스타일 지정:
<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">W3Schools is the best!</h1>
</body>
</html>
관련 페이지
HTML 튜토리얼: HTML ID
HTML 튜토리얼: HTML 속성
CSS 튜토리얼: CSS 구문
CSS 참조: CSS #id 선택기
HTML DOM 참조: HTML DOM getElementById() 메서드
HTML DOM 참조: HTML DOM id 속성
HTML DOM 참조: HTML DOM 스타일 개체