YJ의 새벽

jQuery 박스색 바꾸기 예제 본문

WebFront_/jQuery

jQuery 박스색 바꾸기 예제

YJDawn 2023. 3. 3. 21:12

 

 

 

 

 

 

 

 

 

 

<!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>
     <script src="https://code.jquery.com/jquery-3.6.0.js" 
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 
    crossorigin="anonymous"></script>
</head>
     <style>
        .div2{
            width: 100px;
            height: 100px;
            border: 1px solid black;   
            box-sizing: border-box;
            display: inline-block;
            margin: 0;
        }
        .inputColor{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            width: 100px;
        }
        .box{
            display: inline-block;
        }
        #btn2{
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
<body>
<form>
    <div class=" div2"></div>
    <div class=" div2"></div>
    <div class=" div2"></div>
    <div class=" div2"></div>
    <div class=" div2"></div>
    <div class=" div2"></div>
    <div>
        <input type="text" class="inputColor ">
        <input type="text" class="inputColor ">
        <input type="text" class="inputColor ">
        <input type="text" class="inputColor ">
        <input type="text" class="inputColor ">
        <input type="text" class="inputColor ">
        <button type="reset" id="btn2">리셋</button>
    </div>
</form>

    <script>
         const div2 = $(".div2");
         const inputColor = $(".inputColor");
        $(".inputColor").on("input",function(){

            div2.css("transition-duration","1s"); 
            $(this).css("borderColor",$(this).val()).css("color",$(this).val());  
            for(let i =0; i<div2.length ; i++){
                $(div2[i]).css("backgroundColor",$(inputColor[i]).val());
            }
        })

        $("#btn2").on("click",function(){
            div2.css("backgroundColor","");
            inputColor.css("color","").css("borderColor","");
        })
    </script>
    
</body>
</html>
Document

영어로 색 넣어보세요.

 

 

 

 

 

 

 

 

 

'WebFront_ > jQuery' 카테고리의 다른 글

jQuery ( effect 메소드 )  (0) 2023.03.06
jQuery ( 메소드와 이벤트 )  (0) 2023.03.06
jQuery ( 순회(탐색) 메서드 )  (0) 2023.03.03
jQuery ( 선택자 )  (0) 2023.03.03
jQuery 란? ( onload(), read() )  (0) 2023.03.03
'WebFront_/jQuery' Related Articles more
Comments