JS/기초정리

JS 기초 - DOM 속성 / DOM 스타일

줘니(•̀ᴗ•́)و 2023. 1. 17. 17:26
728x90

1. DOM속성

 

<body>
    <input type="text" id="input_txt">
    <img
    src="https://yt3.ggpht.com/rSGl4rrDBVxbuAm56IsIKSkQKyHexuxXlMbTivvcM1yMQvk-bZflTiHpZ8IeZ0An1EcKQN1p5_c16A=s640-c-fcrop64=1,00000000ffffffff-nd-v1"
    id="img1"
    width="300px"
    > 
    <button onclick="input_val()">인풋태그 값</button>
    <button onclick="img_val()">이미지 값 불러오기</button>
    <button onclick="img_val_change()">이미지 값 수정</button>
</body>

 

일단 실습을 하며 배우기 위해 body 태그 안에 위의 코드를 써두자!

이미지 태그에 src = '가져오고 싶은 이미지' 를 각자 입력하자

 

1. input 태그 내에 사용자가 입력한 값을 가져오는 함수 : .value

 

<script>
    const input_val = () => {
        let inputTag = document.getElementById('input_txt')
        console.log(inputTag.value)
    }
</script>

 

innerText 로는 컨텐츠(내용)만 가져올 수 있다.

input 은 컨텐츠가 없기 때문에  value값으로 가져온다!

 

 

인풋태그 값을 클릭하면 위에 입력한 값이 콘솔에 출력되는 걸 볼 수 있다.

 

 

2. 현재 이미지에 속성 값을 출력하는 함수 : getAttribute('속성이름') / .속성이름

 

const img_val = () => {
	let imgTag = document.getElementByID('img1)
	console.log('case1 :', imgTag.getAttribute('src'))
	console.log('case2 :', imgTag.src)
}

 

둘 중 하나의 방법을 선택하여 사용하면 된다.

 

 

이미지 값 불러오기를 클릭하면 body 태그에서 작성해뒀던 src = '이미지링크' 가 불러와진다.

 

3. 이미지 태그 속성 값 수정하기 : setAttribute('속성이름', '바꿀 값') / .속성이름 = '바꿀 값'

 

const img_val_change = () => {
    let imgTag = document.getElementByID('img1')
    imgTag.setAttribute('src', 'https://yt3.googleusercontent.com/ytc/AMLnZu-I4tSTsWV1tXJ90OmyEMyDdcedcqYhHT06sSU7=s900-c-k-c0x00ffffff-no-rj')
	imgTag.src = 'https://yt3.googleusercontent.com/ytc/AMLnZu-I4tSTsWV1tXJ90OmyEMyDdcedcqYhHT06sSU7=s900-c-k-c0x00ffffff-no-rj'
}

 

둘 중 하나의 방법을 선택하여 각자 가져오고 싶은 다른 사진링크를 복사해서 바꿀 값에 넣어주면 된다.

 

 

이미지 값 수정을 클릭하면 바꿀 값에 넣어주었던 이미지로 바뀐다.

 

 

2. DOM스타일

: DOM 조작으로 CSS를 수정할 수 있다.

- 공식 : 아이디명.style.스타일속성 = '바꿀 스타일속성 값'

 

실습을 통해 알아보자!

버튼 클릭 시, h1 태그의 컨텐츠 값의 디자인을 수정하자 !

 

일단 실습을 위한 body태그를 작성해두자

 

<body>
    <h1 id="txt">DOM 조작을 통한 CSS 수정</h1>
    <button id="btn">스타일 변경</button>
</body>

 

step1 ) change 함수를 정의하자

step2 ) 버튼 클릭 시, change함수 호출하자

 

const change = () => {
    let txt = document.getElementByID('txt')
    txt.style.color = 'blue'
}

let btn = document.getElementById('btn')
btn.addEventListener('click', change)

 

 

 

검정색이었던 글자색을 바꾸기 위해

 

 

스타일 변경을 클릭할 시 글자가 파란색으로 바뀌는 걸 볼 수 있다.

 

 

ez ~

 

728x90