SeouliteLab

jQuery의 .css() 메서드를 활용하여 요소 스타일 변경하기 본문

프로그래밍

jQuery의 .css() 메서드를 활용하여 요소 스타일 변경하기

Seoulite Lab 2024. 3. 26. 15:27

jQuery의 .css() 메서드는 HTML 요소의 CSS 속성을 설정하거나 반환하는 데 사용됩니다. 이를 통해 JavaScript 코드로 동적으로 스타일을 조작할 수 있습니다. 아래에서는 jQuery의 .css() 메서드를 사용하는 다양한 예제를 살펴보겠습니다.

설정

특별한 설정이 필요하지 않습니다. jQuery 라이브러리가 포함된 HTML 파일을 작성하면 됩니다.

예제 1: 배경색 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery .css() 메서드 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>

<div class="box" id="myBox"></div>

<script>
    // 배경색 변경
    $("#myBox").css("background-color", "blue");
</script>

</body>
</html>

출력 결과:

<div class="box" id="myBox" style="background-color: blue;"></div>

위 예제는 특정 요소의 배경색을 파란색으로 변경하는 예제입니다. jQuery의 .css() 메서드를 사용하여 background-color 속성을 설정하고, 해당 요소의 배경색이 파란색으로 변경됩니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .height() 메서드: 요소의 높이를 가져오고 설정하기  (0) 2024.03.27
jQuery의 click 이벤트 핸들러 활용하기  (0) 2024.03.27
jQuery의 반복문 - for 문 활용하기  (0) 2024.03.26
jQuery를 사용한 HTML 요소 동적 추가 - append 메서드  (0) 2024.03.26
jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제  (0) 2024.03.26
'프로그래밍' Related Articles more