<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// http://placekitten.com/너비/높이
const cats = document.querySelectorAll('.cats');
cats.forEach((cat, i) => {
const width = (i+1) * 100;
const value = `http://placekitten.com/${width}/250`
cat.setAttribute('src', value)
// 간단하게 cat.src = value 라고 해도 된다.
})
})
</script>
</head>
<body>
<img class="cats">
<img class="cats">
<img class="cats">
<img class="cats">
</body>
<script src="script.js"></script>
</html>
댓글