[JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기

199_자바스크립트에서 SVG 요소 스타일 변경하기 [적용] 유저 조작에 반응하는 그래픽을 넣고 싶을 때 [문법] 메소드 의미 반환 요소.setAttribute(속성, 값) 요소의 속성 설정 없음 [내용] SVG 요소는 document.querySelector() 등을 사용한 참조와 setAttribute()의 속성값 변경을 통해 스타일을 변경할 수 있다. SVG는 HTML의 DOM과 같은 방식으로 사용할 수 있다. HTML index.html JavaScript main.js const circle1 = document.querySelector('#myCircle'); circle1.setAttribute('r', '100'); // 반직름 지정 circle1.setAttribute('fill', '#..

2022.07.26

[JavaScript] 자바스크립트에서 요소 속성 다루기

148_자바스크립트에서 요소 속성 다루기 [적용] 속성의 값을 변경하고 싶을 때 [문법] 메소드 의미 반환 요소.setAttribute(속성, 값) 요소 속성 설정 없음 요소.getAttribute(속성) 요소 속성 가져오기 없음 요소.hasAttribute(속성) 요소 속성 존재 여부 확인 진리값 [내용] 해당 메소드로 요소 속성을 다룰 수 있다. HTML index.html 링크 JavaScript main.js const anchorElement = document.querySelector('#anchor'); // example.com 출력 console.log(anchorElement.getAttribute('href')); const imageElement = document.querySele..

2022.07.11