[jQuery] CSS

jQuery의 css메소드를 써서

선택자에 따른 css를 부여할 수 있습니다.

이때 jQuery문의 구조는

 

$("선택자").css("속성명", "값")

 

형태입니다.

예제 코드를 살펴보겠습니다.

 

<script type ="text/javascript" src ="jQuery.js"></script>

<script type ="text/javascript">

$(function(){

    // $("선택자").css("속성명", "값");

    $("#btn1").click(()=>{

         

        $("h1").css("color", "teal");

        $("h1").css("background-color", "pink");

       

     

     

     });

});

 

#btn1이라는 선택자는

태그의 id가 btn1이라는 식별자인 선택자입니다.

이것을 클릭하면

콜백함수가 실행됩니다.

콜백 함수의 내용을 보겠습니다.

 

   $("h1").css("color", "teal");

   $("h1").css("background-color", "pink");

 

h1태그의 속성에 값을 부여하는 코드입니다.

h1태그의 글자색을 teal로 바꾸고

h1태그의 배경색을 pink로 바꿉니다.

 

다른 예제도 살펴보겠습니다.

 

let iInput = $("#i");

//btn3을 누르면 input에 입력한 값대로 h1의 글자크기가 바뀌도록

$("#btn3").click(()=>{

     

   $("h1").css("font-size", iInput.val() + "pt");

 

 });

 

input 태그에 i라는 식별자를 넣어봤다고 가정합시다.

먼저 iInput에 i라는 식별자를 가진 값의 주소를 먼저 넣고

val()메소드를 써서 직접 input에 들어간 값을 가져옵니다.

이 값을 font-size에 넣는 코드입니다.