SoloLearn jQuery 번역

Manipulating CSS

CSS 조작하기

• jQuery has several methods for CSS manipulation.
  • jQuery에는 CSS 조작을 위한 몇 가지 메소드가 있다.
• The addClass() method adds one or more classes to the selected elements.
  • addClass() 메소드는 선택된 element에 하나 이상의 class를 추가한다.

• HTML:

<div>What's up?</div>

• CSS:

.header {
  color: blue;
  font-size: x-large;
}

• JS:

$("div").addClass("header");

코드 실행 확인

• The above code assigns the div element the class “header”.
  • 위 코드는 div element에 “header” class를 지정한다.

To specify multiple classes within the addClass() method, just separate them using spaces: $("div").addClass("class1 class2 class3")

class를 공백으로 구분해서, 여러 class를 지정한다.

예: $("div").addClass("class1 class2 class3")

• The removeClass() method removes one or more class names from the selected elements.
  • removeClass() 메소드는 선택된 element에서 하나 이상의 class를 제거한다.

$("div").removeClass("red");

코드 실행 확인

• The code above removes the class “red” from the div element.
  • 위 코드는 div element에서 “red” class를 제거한다.

toggleClass()

toggleClass() 메소드

• The toggleClass() method toggles between adding/removing classes from the selected elements, meaning that if the specified class exists for the element, it is removed, and if it does not exist, it is added.
  • toggleClass() 메소드는 선택된 element의 class를 toggle (추가/제거) 한다.

• HTML:

<p>What's up?</p>
<button>Toggle</button>

• CSS:

.red {
  color: red;
  font-weight: bold;
}

• JS:

$(function() {
  $("button").click(function() {
    $("p").toggleClass("red");
  });
});

코드 실행 확인

The code above toggles the class name “red” upon clicking the button.

위 코드는 버튼을 클릭할 때마다 “red” class를 toggle 한다.

QUIZ

• Fill in the blanks to add the class names “text” and “menu” to the <p> element.
  • “text”와 “menu” class를 <p> element에 추가해라.

$("p").addClass("text menu");

• Which class name will the <p class=”a b”></p> element have after the following code?
  • <p class=”a b”></p> element는 다음 코드 후에 어떤 class를 가지는가?

$("p").addClass("c");
$("p").removeClass("a c");

b

• Will the paragraph have a border after this code?
  • 아래 코드 후, p 태그에 테두리가 생기나?

<style>
  .test {
    border-style: solid;
  }
</style>

<p>What's up?</p>

<script>
  $(function() {
    $("p").addClass("test");
    $("p").toggleClass("test");
  });
</script>

No