자바 스크립트 HTML DOM 변경 CSS
HTML DOM 자바 스크립트 HTML 요소의 스타일을 변경할 수 있습니다.
변경 HTML 스타일
HTML 요소의 스타일을 변경하려면 다음 구문을 사용합니다 :
document.getElementById(id).style.property=新样式
다음은 스타일 <P> 요소를 변경합니다 :
예
<! DOCTYPE HTML>
<HTML>
<헤드>
<메타 캐릭터 = "UTF-8">
<제목>이 튜토리얼 (w3big.com) </ 제목>
</ 헤드>
<바디>
<P ID = "P1"> 안녕하세요 ! </ P>
<P ID = "P2"> 안녕하세요 ! </ P>
<스크립트> 중요 document.getElementById ( "P2" ) style.color = "파란색";. 중요 document.getElementById ( "P2") style.fontFamily = "굴림"; .. 중요 document.getElementById ( "P2") style.fontSize = "큰"; </ script>
<P> 위의 단락을 수정하여 스크립트. </ P>
</ BODY>
</ HTML>
»시도
사용 이벤트
HTML DOM은 우리가 이벤트를 트리거하여 코드를 실행할 수 있습니다.
예를 들어, 이벤트는 다음의 :
- 요소를 클릭합니다.
- 페이지가로드.
- 입력 상자가 수정됩니다.
- ......
다음 섹션에서는 이벤트 지식에 대한 자세한 내용을 배울 것입니다.
사용자가 버튼을 클릭하면이 예에서는 = "ID1"HTML 요소의 스타일 ID를 변경한다 :
예
<! DOCTYPE html로>
<HTML>
<바디>
<H1 한 id = "ID1은"> 내 1 </ H1>를 향하고
<버튼 유형 = "버튼"
의 onclick = "중요 document.getElementById ( 'ID1'). style.color = '빨간색'">
나 포인트! </ 버튼>
</ BODY>
</ HTML>
<HTML>
<바디>
<H1 한 id = "ID1은"> 내 1 </ H1>를 향하고
<버튼 유형 = "버튼"
의 onclick = "중요 document.getElementById ( 'ID1'). style.color = '빨간색'">
나 포인트! </ 버튼>
</ BODY>
</ HTML>
»시도
더 많은 예제
시계
요소가 보이지 않게하는 방법. 요소 표시하거나 사라지게하려면?