[jQuery] CSS스타일 변경하기

CSS스타일 변경하기

 

$('선택자').css('속성', 값);

• 선택자 : CSS와 같은 선택자를 지정. 지원되지 않는 것도 있지만 특정요소를 지정하는데는 문제 없음
• 속성 : CSS속성을 지원
• 값 : 속성에 설정할 값을 지정
• '선택자에 해당하는 요소의 CSS속성의 값을 변경한다'라는 처리를 수행

// $(document).ready(function(){ //docuemnt(HTML)로드완료시
//     $('h1').css({'color':'red'});
// });
$(function(){ //docuemnt(HTML)로드완료시
     //css속성 하나를 변경
    $('h1').css('color','red');
   
    //css속성 여러개를 한번에 변경
    //값의 수치에는 따옴표('')를 붙이지 않아도 되지만 퍼센트(%)단위일 경우에는 따옴표로 감싸야함(감싸지 않으면 픽셀단위로 작동)
   // $('#typo .inner').css({
   // 	'text-decoration':'underline', 
   //     'border-bottom':'5px solid red', 
   //     'transform':'rotate(45deg)', 
   //     'opacity':0.5 //값의 수치에는 따옴표('')를 붙이지 않아도 됨
   // });
   
   //위에 작성한 코드와 동일
   //하이픈('-')없애고 대문자로 바꾸면 더 간단히 작성가능
        $('#typo .inner').css({
        'textDecoration':'underline', 
        'borderBottom':'5px solid red', 
        'transform':'rotate(45deg)', 
        'opacity':0.5
    });
});

 

 

 

 

출처 : www.youtube.com/watch?v=vJxHImVT810&list=PL-qMANrofLyu4HcK14ntl-o7d-eHxo7-U&index=2