Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

왕초보 코딩 개발 일지 블로그

[23.05.08] 배경바꾸는 버튼 본문

Javacript

[23.05.08] 배경바꾸는 버튼

아캔두우잇 2023. 5. 8. 16:21
반응형
first time

Hello world!

first time!

  • HTML
  • CSS
  • JavaScript
<!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>first time</title>
</head>
<body>
    <h1>Hello world!</h1>
    <button onclick="btnChange()">Change💕</button>
    <button onclick="btnRevert()">Revert🎶</button>
    <p>first time!</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
   
    <script>
        btnChange = function(){
            //함수선언
            document.getElementsByTagName('body')[0].style.backgroundColor='black';
            // 문서에서.가져와라 요소를 태그이름을 통해서(body태그)[0번째].스타일을 바꿔라.배경색='검은색'으로;
            document.getElementsByTagName('body')[0].style.color='white';
            // 문서에서.가져와라태그이름을 통해서 요소를(body태그)[0번째].스타일을지정해라.글씨색을='흰색으로';
        }

        btnRevert = function(){
            document.getElementsByTagName('body')[0].style.backgroundColor='white';
            document.getElementsByTagName('body')[0].style.color='black';  
        }
    </script>
</body>
</html>
반응형

'Javacript' 카테고리의 다른 글

[23.05.09] 자바스크립트 배열 인덱스 데이터 추가 및 삭제 방법  (0) 2023.05.09
[23.05.09] 자바스크립트 반복문 활용 : 숫자 배열 안에서 최댓값 출력 & 홀수만 출력  (0) 2023.05.09
[23.05.09] 함수 호이스팅 (함수 선언문과 함수 표현식의 차이)  (0) 2023.05.09
[23.05.09] if와 switch를 사용하여 자판기 만들기  (0) 2023.05.09
[23.05.08] 예제 background color  (0) 2023.05.08
'Javacript' Related Articles more