티스토리 뷰

(기초)그래서 뭘 배운거야?/JavaScript

JS-16-DOM : 자바스크립트 이용 디자인 먹이기

Soheny.P 2021. 9. 13. 21:43
728x90
<!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>Document</title>
</head>
<body>
    <p>tag</p>
    <p class="cl1">class tag</p>
    <p id="id1">id tag</p>
    <button id="btn">버튼</button>
    <script>
        // DOM (Document Of Model)
        /* 
            - elements, node, attribute 등 다양한 엘리먼트의 속성 또는 엘리먼트 자체 조작 위해 브라우저에서 제공하는 객체

            - 이 객체 통해 자바스크립드 내에서 다양한 핸들링 가능

            - 자바스크립트는 dom 아용해 이벤트 제작, 엘리먼트 및 노드 추가, 수정, 삭제 가능
        
        */


        //                            p태그. 0번째. 스타일. 배경컬러 = 옐로
        document.getElementsByTagName("p")[0].style.backgroundColor = "yellow";

        //                                      클래스이름, (클래스 중)0번째
        let a = document.getElementsByClassName("cl1")[0];
        // a의 스타일을 블루로 = 텍스트 컬러
        a.style.color = "blue";


        //                              id이름 (번째 안씀!!!! 쓰지마!!1)
        let b = document.getElementById("id1");
        b.style.border = "1px dotted green";

        //                    버튼이름 .이벤트추가("클릭하면",기능수행한다(){스타일});           
        document.getElementById("btn").addEventListener("click",function(){
            b.style.fontWeight = "bold";
            b.style.fontSize = "3.5rem";
        });


    </script>
</body>
</html>

 

 

여러 요소에 한 번에 디자인 먹이기

<!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>Document</title>
</head>

<body>
    <p id="id1">이건 id 태그 문장임</p>
    <p class="cl1">이건 class 태그 문장임</p>
    <p class="cl1">이건 class 태그 문장임</p>
    <p class="cl1">이건 class 태그 문장임</p>
    <p class="cl1">이건 class 태그 문장임</p>
    <button id="btn1">버튼임</button>
    <button id="btn2">버튼임</button>
    <script>
        const id1 = document.querySelector("#id1");
        const cl1 = document.querySelectorAll(".cl1");

        document.querySelector("#btn1").addEventListener("click",function(){
            id1.style.fontSize = "3.5rem";
        });

        
        // 여러개 셀렉터 받을 때 querySelectorAll
        document.querySelector("#btn2").addEventListener("click",function(){
            cl1[0].style.backgroundColor = "cyan";
            cl1[1].style.backgroundColor = "cyan";
            cl1[2].style.backgroundColor = "cyan";
            cl1[3].style.backgroundColor = "cyan";
        });



    </script>
</body>

</html>

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > JavaScript' 카테고리의 다른 글

JS-17-DOM : 자바스크립트 이용 입력창 띄우기  (0) 2021.09.13
JS-15-Null Merge : 널 병합 연산  (0) 2021.09.13
JS-14-ternary operator : 삼항 연산자  (0) 2021.09.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/08   »
일 월 화 수 목 금 토
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
31
글 보관함