Visual Studio Code/Visual Studio Code icia 35일차
Visual Studio code dom 활용한 예제 - 2
swkn
2023. 4. 11. 18:31
1. 이미지 파일 수정
dom을 이용해서 이미지파일도 수정가능하다.
<body>
<img src="../images/캡처.PNG" alt="" id="img1" />
<button onclick="changeImg()">이미지 교체</button>
</body>이미지를 첨부하고 버튼을 추가해서 누르면 changeImg() 메소드가 실행된다.
const changeImg = () => {
const img = document.getElementById('img1');
console.log(img1);
// 이미지 경로값
console.log(img.src);
// src 값을 변경하여 출력되는 이미지 변경하기
img.src = '../images/카카오프렌즈_라이언.png';
};dom을 이용해서 객체에 저장한 후 속성을 변경해서 이미지를 수정가능하다.
../ 와 ./ 의 절대경로 상대경로를 유의하는 것이 좋겠다.
2. 요소의 css 속성 제어하기
<body>
<h2 onclick="fun1()" id="id1">스타일 변경</h2>
</body>
h2 속성의 글에 onclick 속성을 주어서 누르면 fun1() 메소드가 실행된다.
<script>
const fun1 = () => {
const ele = document.getElementById("id1");
console.log(ele.style);
ele.style.color = "red";
ele.innerText = "색 추가";
ele.style.backgroundColor = "blue";
};
</script>id1을 가진 값을 가져와서 ele.style을 이용해서 색을 빨간색 , 글을 "색 추가"로 변경, back ground color = blue로 변경된다.
