Web/JavaScript

style, document, 비교연산자

뉴비뉴 2019. 3. 11.

style

night라는 버튼을 누르면 body background가 검정색으로 변경되고

day 라는 버튼을 누르면 body background가 하얀색으로 변경된다.

<body background color . . .> 이런 식으로 추가하면 되지만

JavaScript를 사용해서 이벤트를 생성해보도록 하자.

<input type="button" value="night" onclick="

document.querySelector('body').style.backgroundColor = 'black';

document.querySelector('body').style.color = 'white';

[!] 대소문자 주의

input 태그로 button 을 만들어주고, 이름은 night로 설정해준다.

onclick 버튼 클릭 시 querySelector 는 body에 style의 backgroundcolor 부분을 black 으로 변경한다.

'body' 부분은 변경 될 수 있다. 예를들어 <body id = target> 을 사용했다면

'body' 부분에 #target 이 들어가면 된다.

위 예제는 night 버튼과 day 버튼으로 배경색과 글씨색을 정하였다.

하지만 한 개의 버튼으로 night와 day 버튼을 눌렀을 때의 효과가 나오게 하는 것을 토글이라고 한다.(조건문)

비교연산자

document.write(1===1); // true

document.write(1===2); // false

<h3>1<2</h3> // 1<2 를 표시 할 때 < 만 사용하게되면 HTML 에서 사용하는 꺽새이기 때문에 이럴 땐

<h3>1<2</h3> 라고 해줘야 <가 표시된다.

[javascript] 기본 (0)	2019.01.31

댓글