JavaScript / document.getElementById와 className
2021. 1. 6. 21:46
728x90
반응형
|
●해당 JavaScript 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. |
버튼을 누르면, html의 속성이 바뀌게 할 수 있는 것이 바로 제목에 나와있는 명령어로 가능하다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.em{
text-decoration:underline;
}
</style>
</head>
<body>
<ol id="target">
<li >html</li>
<li>css</li>
<li>javascri1pt</li>
</ol>
<ul>
<li>최진혁</li>
<li >최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
<input type="button" value="강조" onclick="document.getElementById('target').className='em'" />
</body>
</html>우선 화면에 나와 있는 강조 버튼을 누르면 html css javascript부분에만 밑줄이 그어지는데,
어떤 원리인지 설명하려고 한다. 일단 강조를 클릭하게 되면 onclick이라는 속성이 작용이 되면서
document.getElementById가 ()안에 있는 타깃을 제어하므로, 타깃(임의의 이름이다)이 포함되어 있는
ol전체부분을 제어하는 것이다.
그리고 이 target(ol의 전체 부분)은 className이라는 속성에 의해서 변하게 되는 것인데, 클래스 네임의 값은 em 즉, 스타일 태그에 밑줄 태그를 말하는 것이므로,
강조 버튼을 누르면, html css javascript 부분에 밑줄을 치게 되는 결과가 나오면서,
동시에 태그값이 변경되는 결과를 보여준다. 한마디로 이 javascript의 역할은
html을 제어하는 역할을 수행하는 언어라고 할 수 있는 것이다.
728x90
반응형
'Programing > JavaScript' 카테고리의 다른 글
| 자바스크립트 Swiper를 이용한 스와이프뷰 간단하게 만들어보기 (0) | 2021.04.20 |
|---|---|
| JavaScript/getElementById와 value (0) | 2021.01.05 |
| JavaScript 버튼만들기와 prompt로 경고창 만들기 (0) | 2020.12.30 |
| JavaScript란/자바스크립트란? (0) | 2020.12.29 |
