JS | 노드 css 변경하기

1. 노드의 css속성을 바꿀 떄는 style속성을 이용합니다.

2.  css 속성은 카멜 표기법을 따릅니다. (하이픈이 제거되고 카멜표기법)

ex) text-aligin = textAlign 

태그를 얻어와 style속성으로 접근한다.

3. 노드의 style에 전달되는 값은 문자열로 작성합니다.

 

규칙 

노드.style.css속성 = "값"

 

예제 1) li의 배경색 변경

 

<ul class="box">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>

    <button id="btn">css속성변경하기</button>

    <script>

        var btn = document.getElementById("btn");
        var li = document.querySelectorAll(".box li");
        btn.onclick = function(){

            for(var i = 0; i < li.length; i++){
                li[i].style.backgroundColor = "pink";    
                li[i].style.color = "white";
            }
        }

    </script>

퀴즈1 ) 옵션의 value 값에 따라 이미지 변경 /  color 값에 따라 border 색상 변경

select 안에 option의 value 값을 얻으려면 select.value

 <!--


    <article>
        <img src="img/1.jpg" width = "200" alt="" style="border: 3px solid black;">

        <select id = "sel">
            <option value="1.jpg">봄</option>
            <option value="2.jpg">여름</option>
            <option value="3.jpg">가을</option>
            <option value="4.jpg">겨울</option>
        </select>

        <button class="btn">이미지 변경</button>

        <input type="color" class="input">
        <button class="btn2">색상 변경</button>
    </article>

    <script>

        var sel = document.getElementById("sel");
        var btn = document.querySelector(".btn");
        var btn2 = document.querySelector(".btn2");
        var col = document.querySelector("input");

        var img = document.getElementsByTagName("img");

        btn.onclick = function(){
                img[0].src = "img/"+sel.value;
        }

        console.log(col);
        console.log(col.value);

        btn2.onclick = function(){
            img[0].style.borderColor = col.value;
        }

    </script>-->

    <h3>change 이벤트로 한번에 변경하기</h3>
    <article>
        <img src="img/1.jpg" width = "200" alt="" style="border: 3px solid black;" class="img">

        <select class = "sel">
            <option value="1.jpg">봄</option>
            <option value="2.jpg">여름</option>
            <option value="3.jpg">가을</option>
            <option value="4.jpg">겨울</option>
        </select>

        <input type="color" class="input">
    </article>

    <script>
        var img = document.querySelector(".img");
        var sel = document.querySelector(".sel");
        sel.onchange = function(){
            img.src = "img/" + sel.value;
        }

        var input = document.querySelector(".input");
        input.onchange = function(){
            img.style.border = "3px solid " + input.value;
        }

    </script>

 

 

퀴즈2 ) 아이디와 비밀번호의 조건 충족

 

  <h3>focus : input에 focus가 들어갈 때 동작</h3>
    <h3>blur : input에 focus가 떠났을 때 동작</h3>

    <div id = "box_wrap">
        <div class="box">
            <h3>LOGIN</h3>
            <span>ID</span> <input type="text" class="id" placeholder="4글자 이상">
            <p class="id_msg"></p>
            <span>PW</span> <input type="text" class="pw" placeholder="9글자 이상">
            <p class="pw_msg"></p>
        </div>
    </div>

<!--blur : 포커스가 떠나면 바로 동작-->
<!--change : 값이 변했을 때 동작-->
<script>
        var id = document.querySelector(".id");
        var pw = document.querySelector(".pw");
        var id_msg = document.querySelector(".id_msg");
        var pw_msg = document.querySelector(".pw_msg");

        id.onchange = function(){

            if(id.value.length<4){
                id_msg.innerHTML= "*아이디는 4글자 이상이어야 합니다.";
                id.style.border = "1px solid red";
            } else {
                id_msg.innerHTML= "";
                id.style.border = "1px solid green";
            }
        }

        pw.onchange = function(){

            if(pw.value.length<9){
                pw_msg.innerHTML= "*비밀번호는 9글자 이상이어야 합니다.";
                pw.style.border = "1px solid red";
            } else {
                pw_msg.innerHTML= "";
                pw.style.border = "1px solid green";
            }
        }


    </script>

 

 

https://codeshare.io/ 협업시 유용한 코드 공유 프로그램