jQuery 를 이용한 스타일 변경

CSS 속성값 확인

$("변경하려는 대상").css("속성");

CSS 속성값 변경

$("변경하려는 대상").css("속성","속성값"); 

css 및 style 제어

css 제어

$('#popupSlide').css("border","1px solid red");

style 제어

$('#popupSlide').attr("style", "display:none");

$(document).ready(function(){ 
    $('#closeSubmenu').click(function(event){ 
        $('#popupSlide').attr("style", "display:none"); 
    });
});

리스트 마우스 오버 / 클릭시 색상 변경

게시판 같은 경우 마우스를 오버하거나 클릭했을때 색상을 유지 하는 방법입니다.

<style type="text/css"> 
    .add_frm_table#report_list tr:hover { background-color:#DBE8EC; }
</style>

$(function(){ 
    $("[id^='row_']").click(function(){ 
        $(this).css("background-color", "#DBE8EC"); 
    }); 
});

<table class="add_frm_table">.....</table>

$("#layerBack").css({ 
        opacity: (30 / 100),
        filter: 'alpha(opacity=' + 30 + ')', 
        position: 'absolute', 
        zIndex: 1000, 
        top: '0px', 
        left: '0px', 
        width: '100%', 
        height: $(document).height(), 
        background: "#000" 
    }).show();

Element에 클라스 추가 삭제

removeClass 혹은 addClass 사용

function boardTab(no){ //쪽지함탭이동 
  $(".boardTab li").removeClass('on');
  for(var i=1; i<= $(".boardTab li").length; i++){ 
    if( i == no ){ 
      $(".boardTab li.tab"+i).addClass('on') //
      $("#boardTab_0"+i).show(); //
      $("boardTab").show(); //background:url('/img/mypage/note_tab_bg.gif') no-repeat left top; color:#4a4949; 
    else { //
      $("#boardTab_0"+i).hide(); 
    } 
  } 
}