JAVASCRIPT / attribute
attribute
요소의 속성에 접근하여 값을 변경, 추가할 수 있다.
element.attribute = "값" 의 형태로 사용한다.
문법
const img = document.getElementById("img");
img.src = "./아무사진1.png";위의 코드를 사용하면 <img src="" id="img"> 인 태그를 <img src="./아무사진1.png" id="img"로 변경 한다.
setAttribute()
요소의 속성에 접근하여 값을 변경, 추가할 수 있다.
element.setAttribute('속성', '값')의 형태로 사용한다.
문법
const img = document.getElementById("img");
img.setAttribute('src', '아무사진1.png');
위의 코드를 사용하면 <img src="" id="img"> 인 태그를 <img src="아무사진1.png" id="img"로 변경 한다.
예제
버튼 클릭시 이미지가 생성
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
// 이미지가 생성될 영역
<img src="" width="300" id="img">
<button id="load_img">이미지 생성</button>
</body>
<script>
// id가 img인 요소 접근
const img = document.getElementById("img");
// load_img인 요소 변수 생성
const load_btn = document.getElementById("load_img");
// load_btn 클릭시 이벤트 처리
load_btn.addEventListener('click', (e) => {
// img의 src값에 사진의 경로를 설정
img.setAttribute('src', '../image/과일1.png');
});
</script>
</html>
'웹 > 자바스크립트' 카테고리의 다른 글
| [JavaScript] element.style.property / HTML요소의 스타일 변경 (0) | 2021.07.09 |
|---|---|
| [JavaScript] element.getAttribute / 요소의 속성값에 접근 (0) | 2021.07.09 |
| [JavaScript] element.innerHTML / HTML요소를 변경하는 방법 (0) | 2021.07.09 |
| [JavaScript] getElementById() 문서객체의 Id값을 가져오는 메소드 (0) | 2021.07.09 |
| [JavaScript] 자바스크립트 변수와 타입 (배열, 오브젝트) (0) | 2021.07.04 |