[jQuery] jQuery CSS 속성 추가

26 Dec 2023

jQuery

jQuery를 이용한 CSS 속성 추가

jQuery를 사용하면 css() 메소드를 사용하여 요소에 CSS 속성을 동적으로 추가할 수 있습니다.

CSS 메소드

css() 메소드를 사용하여 요소에 CSS 속성을 설정할 수 있습니다. 예를 들어, 아래의 코드는 div 요소에 color와 font-size CSS 속성을 추가합니다.

$("div").css("color", "red");
$("div").css("font-size", "20px");

addClass와 css 메소드 비교

addClass() 메소드를 사용하여 CSS 클래스를 추가할 수도 있지만, css() 메소드를 사용하면 개별적인 CSS 속성을 설정할 수 있습니다. 또한, CSS 클래스의 속성과 중복되는 경우 css() 메소드를 사용하여 덮어쓸 수 있습니다.

예제 코드

아래의 예제 코드는 버튼을 클릭할 때, p 요소에 새로운 CSS 속성을 추가하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "blue");
    $("p").css("font-size", "24px");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button>추가</button>

</body>
</html>

이 예제를 실행하면 버튼을 클릭할 때마다 p 요소에 새로운 CSS 속성이 추가됩니다.

이제 jQuery를 사용하여 HTML 요소에 CSS 속성을 추가하는 방법을 알아보았습니다. CSS 속성을 동적으로 변경함으로써 웹 페이지의 모양과 느낌을 개선할 수 있습니다.

목차

jQuery를 이용한 CSS 속성 추가

CSS 메소드

addClass와 css 메소드 비교

예제 코드