jQuery 스타일 다루기

jQuery 스타일 다루기

jQuery에서 제공하는 스타일을 제공하는 기능 중에서 알아야 할 내용을 정리하자면 아래와 같습니다.

1. 스타일 값 구하기

$(대상).css("스타일 속성 이름")
$(대상).css(["스타일 속성 이름", "스타일 속성 이름"])

2. 스타일 값 설정하기

$(대상).css("스타일 속성" ,"값")
$(대상).css({
    속성이름:값
    속성이름:값
);

3. 클래스 추가

$대상.addClass("클래스이름");
$대상.addClass("클래스이름1 클래스 이름2")

4. 클래스 삭제

$대상.removeClass() //모든 클래스 삭제
$대상.removeClass("클래스 이름")
$대상.removeClass("클래스이름1 클래스 이름2")

예제를 위해 아래와 같이 코드를 준비하였습니다.

<style>
    .select {border:solid}
    .selectfont {font-size:24px}
    .selectbg {background-color:orange}
</style>
 
<div class="container">
    <ul>
        <li id="menu1">menu1</li>
        <li id="menu2" class="select">menu2</li>
        <li id="menu3" class="selectfont">menu3</li>
        <li id="menu4" class="selectbg">menu4</li>
        <li id="menu5" class="select selectfont selectbg">menu5</li>
    </ul>
</div>

---

1. 스타일 값 구하기

$(대상).css("스타일 속성 이름")
$(대상).css(["스타일 속성 이름", "스타일 속성 이름"])

console.log($("#menu2").css("border"););//3px solid rgb(51, 51, 51)
 
var cssInfo = $("#menu5").css(["border", "font-size", "background-color"]);
console.log(cssInfo); //{border: "3px solid rgb(51, 51, 51)", font-size: "24px", background-color: "rgb(255, 165, 0)"}

---

2. 스타일 값 설정하기

$(대상).css("스타일 속성" ,"값")
$(대상).css({
    속성이름:값
    속성이름:값
);

$("#menu1").css("background-color", "red");
 
$("#menu1").css({
    backgroundColor:'red',
    border:"solid",
    fontSize:"24px"
});

---

3. 클래스 추가

$대상.addClass("클래스이름");
$대상.addClass("클래스이름1 클래스 이름2")

$("#menu1").addClass("select");
 
$("#menu1").addClass("select selectfont");

---

4. 클래스 삭제

$대상.removeClass() //모든 클래스 삭제
$대상.removeClass("클래스 이름")
$대상.removeClass("클래스이름1 클래스 이름2")

$("#menu4").removeClass("selectbg");
 
$("#menu5").removeClass("select selectfont");