Javascript를 이용하여 선택한 요소(element)의 속성(attribute) 값을 설정할 수 있습니다.
먼저 문법 먼저 알아보도록 하겠습니다.(절대 다음과 같이 똑같이 코드를 작성한다고 동작하지는 않습니다.)
01. setAttribute 함수
문법
element.setAttribute('attribute_name', 'attribute_value');
element를 선택하여 setAttribute 함수를 실행할 때 우리가 설정하고자 하는 attribute_name(속성 이름)과 attribute_value(속성 값)을 넣어줘야 합니다.
예제 소스코드
document.getElementById('id_value').setAttribute('title', 'It is kkamikoon Title');
위의 예제 소스코드를 살펴보시면 getElementById() 함수를 통해 'id_value'를 가지고 있는 요소를 가져옵니다.
그리고 setAttribute() 함수를 통해 'title' 이라는 이름에 'It is kkamikoon Title'이라는 값을 넣어줍니다.
보다 자세한 예시로 살펴보도록 합시다.
02. setAttribute 함수 응용 예제
만약 id 값이 test인 요소에 href 속성 값을 변경하는 소스코드는 다음과 같습니다.
<html lang="ko">
<head>
<title>JavaScript - kkamikoon | .setAttribute()</title>
</head>
<body>
<p><a id="test" target="_blank">kkamikoon main page</a></p>
<script>
document.getElementById( 'test' ).setAttribute( 'href', 'https://kkamikoon.tistory.com' );
</script>
</body>
</html>
결과
'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글
| [Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시) (4) | 2019.03.05 |
|---|---|
| [Javascript] onchange 이벤트로 내용 변경 감지 (6) | 2019.02.19 |
| [JQuery] remove() 함수를 이용하여 콘텐츠를 삭제하는 방법 (0) | 2019.02.06 |
| [JQuery] append() 함수를 이용하여 콘텐츠를 추가하는 방법 (2) | 2019.02.06 |