[javascript] jQuery로 CSS 스타일 조작하기
jQuery는 JavaScript를 간편하게 다룰 수 있도록 도와주는 라이브러리로, 웹 페이지의 요소들을 쉽게 조작할 수 있도록 해줍니다. 이 포스트에서는 jQuery를 사용하여 CSS 스타일을 조작하는 방법에 대해 알아보겠습니다.
요소의 CSS 스타일 변경하기
jQuery를 사용하면 HTML 요소의 CSS 스타일을 간단하게 변경할 수 있습니다. 다음은 jQuery를 사용하여 요소의 배경색과 글자색을 변경하는 예제입니다.
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
$("p").css("color", "red");
});
});
위 코드에서는 버튼이 클릭되면 “p” 요소의 배경색을 노란색으로, 글자색을 빨간색으로 변경합니다.
CSS 클래스 추가 및 제거하기
jQuery를 사용하여 CSS 클래스를 추가하거나 제거할 수도 있습니다. 다음은 버튼을 클릭했을 때 “active” 클래스를 추가하거나 제거하는 예제입니다.
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("active");
});
});
위 코드에서는 버튼을 클릭할 때마다 “active” 클래스가 추가되거나 제거됩니다.
요소의 CSS 속성 읽기
jQuery를 사용하여 요소의 CSS 속성도 읽어올 수 있습니다. 다음은 “p” 요소의 너비와 높이를 콘솔에 출력하는 예제입니다.
$(document).ready(function(){
$("button").click(function(){
var width = $("p").css("width");
var height = $("p").css("height");
console.log("Width: " + width + ", Height: " + height);
});
});
위 코드에서는 버튼을 클릭하면 “p” 요소의 너비와 높이를 콘솔에 출력합니다.
요약
jQuery를 사용하면 CSS 스타일을 쉽게 조작할 수 있습니다. 위에서 소개한 예제들을 통해 jQuery를 사용하여 요소의 CSS 스타일을 변경하고 읽는 방법에 대해 알아보았습니다.
이렇게 jQuery를 사용하면 웹 개발 시 CSS 스타일을 동적으로 조작할 수 있어서 더욱 다양하고 흥미로운 웹 페이지를 구현할 수 있습니다.