문서 객체의 속성을 조작할 때는
문서객체.setAttribute(속성이름, 값) : 특정 속성에 값을 지정한다
문서객체.getAttribute(속성이름, 값) : 특정 속성을 추출한다
아래 예제는
img태그의 src속성을 조작해서 이미지를 출력하는 예
이미지 url : http://placekitten.com/너비/높이
<script>
document.addEventListener('DOMContentLoaded',()=>{
const rects = document.querySelectorAll('.rect')
rects.forEach((rect,index)=> {
const width = (index + 1) *100
const src = `http://placekitten.com/${width}/250`
rect.setAttribute('src',src)
})
})
</script>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
forEach로 출력되는 index값 [0,1,2,3]에 + 1 을 하고 * 100 을 해서 Width 속성을 지정해 준 것
결 과
width가 다른 고양이img가 출력되었다
'개발공부_Blog > JavaScript' 카테고리의 다른 글
| javascript - createElement / appendChild / removeChild (0) | 2021.12.19 |
|---|---|
| javascript - style.backgroundColor = 'red' (0) | 2021.12.19 |
| javascript - .textContent / .innerHTML (0) | 2021.12.19 |
| javascript - querySelector, querySelectorAll (0) | 2021.12.19 |
| javascript - 객체속성확인 (0) | 2021.12.18 |
댓글