1. 자바 스크립트에서 스타일 접근하기!
자바 스크립트은 스타일에 자주 접근을 한다.
예를 들어 만약 회원가입을 할 때 아이디가 중복되어있으면 빨간색으로 아이디를 출력시킬 수 있다.
이런 식으로 자바스크립트에서 css에 대한 접근은 정말 자주 하게 된다.
jQuery에서도 명령어들이 더러 있을 정도이다.
우선 아래와 같은 코드로 <div>를 하나 만들고 버튼도 함께 만들었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_style접근.html</title>
</head>
<body>
<h3>자바스크립트에서 스타일 접근</h3>
<div id="mydiv" style="position: relative;
top: 10px;
left: 20px;
width: 150px;
height: 70px;
background-color: rebeccapurple;">
대한민국
</div>
<input type="button" value="mydive의 style속성" onclick="test1()">
<script>
</script>
</body>
</html>
아래의 버튼을 누르면 div의 스타일 속성을 변화시킬 것이다.
속성 변화는 test1() 함수로 줄 것이다.
2. 버튼으로 .css 접근하기
1) test1() 함수로 <mydiv>의 .css에 제대로 접근하는지 alert()로 확인해보기
먼저 test1() 함수를 만들어보자.
그리고 test1() 함수가 정상적으로 접근이 되는지를 알아보기 위해 alert를 이용해서 접근해본다.
function test1 () {
alert(document.getElementById("mydiv")); // [object HTMLDivElement]
alert(document.getElementById("mydiv").style); // [object CSSStyleDeclaration]
}
위의 코드는 순수하게 자바스크립드단에서 .css를 접근하는 방법이다.
그리고 jQuery에서 접근하는 방법은 아래와 같다.
$("#mydiv").css();
jQuery는 결국 자바스크립트에서 쓰는 코드를 더 간편하게 접근하게 해주는 라이브러리 개념이다.
그렇기에 앞으로도 jQuery 방식으로 스타일에 접근하는 것을 추천한다.
위처럼 자바 스크립트에서 스타일에 손쉽게 접근을 할 수 있고 변환도 가능하다.
이제 본격적으로 버튼을 누르면 스타일이 변화되게 해보자.
2) test2() 함수로 버튼을 누르면 스타일 변화되게 해보기
이번에는 test2() 함수로 버튼을 만들어서 스타일을 변화시킬 것이다.
function test2() {
document.getElementById("mydiv").style.top="100px";
document.getElementById("mydiv").style.left="150px";
document.getElementById("mydiv").style.width="400px";
document.getElementById("mydiv").style.height="300px";
document.getElementById("mydiv").style.backgroundColor="green";
document.getElementById("mydiv").style.position="absolute";
} // test2() end
2번째 버튼을 누르면 top, left, width, height, backgroundColor, position의 속성이 모두 변화된다.
↓ 테스트!~ (top과 left, 그리고 position을 건드리니 창에서 사라져서 이 테스트에서는 제자리에서 크기만 커지게 했다)
자바스크립트에서 스타일 접근
3. 자바스크립트로 접근해서 이미지 바꾸기
스타일을 변환시켰던 것처럼 이미지를 전환하는 것도 가능하다.
아래의 코드를 살펴보면 .src에 접근해서 이미지를 전환시키는 과정을 살펴볼 수 있을 것이다.
function test3() {
document.getElementById("myimg").src="../../images/devil.png";
} // test3() end'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #12 JavaScript JSON (0) | 2022.08.17 |
|---|---|
| [JS] #11 This (0) | 2022.08.17 |
| [JS] #9-2 유효성 검사 - 회원가입틀 만들기 2 (0) | 2022.08.16 |
| [JS] #9-1 유효성 검사 - 회원가입틀 만들기 1 (0) | 2022.08.16 |
| [JS] #8 String 함수 (0) | 2022.08.12 |