Javascript 이용하여 CSS를 변경할 수 있다.
CSS 변경
Javascript 이벤트가 발생될 때 CSS를 변경하면 더 재미있는 웹사이트를 만들 수 있다.
이벤트 생성하는 방법은 Javascript - 기초 - 이벤트를 참고하자.
getElementById()
ID가 있는 요소에 대해서는 getElementById() 메서드 이용한다.
Javascript
document.getElementById('ID').style.속성 = "속성값";
이런식으로 입력을 한다.
코딩
HTML
<p id="pid">강다니엘</p> <button>Change color</button>
Javascript
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.getElementById('pid').style.color = rndCol;
}
기본 예시
사용된 코드 설명
return Math.floor(Math.random() * (number+1));
:
무작위로 숫자를 만들고 그 값을 반환한다.
btn.onclick = function() { … }
:
btn을 클릭했을 때 함수가 실행되게끔 한다.
const rndCol = ‘rgb(‘ + random(255) + ‘,’ + random(255) + ‘,’ + random(255) + ‘)’;
:
rndCol 변수를 만들고 rgb 값을 무작위 숫자로 저장한다.
document.getElementById(‘pid’).style.color = rndCol;
:
#pid의 글자 색상을 rndCol에서 저장한 값으로 넣는다..
querySelector()
ID가 없는 요소에 대해서는 querySelector() 메서드를 이용한다.
Javascript
document.querySelector('CSS선택자').style.속성 = "속성값";
이런식으로 입력을 한다.
코딩
HTML
<p>강다니엘</p> <button>Change color</button>
Javascript
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.querySelector('p').style.color = rndCol;
}
기본 예시
사용된 코드 설명
document.querySelector(‘p’).style.color = rndCol;
:
<p> 태그의 글자 색상을 rndCol에서 저장한 값으로 넣는다.
여기서 <p>태그에 class를 지정하면 querySelector(‘p’)대신 querySelector(‘.class이름’) 이렇게 사용할 수 있다.
여기서 <p>태그에 class를 지정하면 querySelector(‘p’)대신 querySelector(‘.class이름’) 이렇게 사용할 수 있다.
이 외의 코드는 위와 동일하다.
참고
W3C School - JavaScript DOM CSS
Javascript - 기초 - 이벤트
공부 목적 블로그