[HTML_CSS] JQ - css() 메서드 ★★★ - CSS 설정/반환 (= CSS메서드 = 스타일메서드) ※ 스타일 주기

목차

1. CSS 속성값 반환
2. CSS 속성값 설정

CSS 속성값 반환

• 첫 번째만 반환
• 여러 속성 반환

---

첫 번째만 반환

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        alert("배경색 = " + $("p").css("background-color"));

    });

});

</script>

<style>

  p {padding:10px; color:white;}

</style>

<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<p style="background-color:red">HTML</p>

<p style="background-color:blue">CSS</p>

<p style="background-color:green">JS</p>

<button>p 요소 배경색 코드 보기</button>

결과보기

---

여러 속성 반환 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        alert("배경색 = " + $("p").eq(0).css("background-color") + 

             "\n배경색 = " + $("p").eq(1).css("background-color") + 

             "\n배경색 = " + $("p").eq(2).css("background-color"));

    });

});

</script>

 

<style>

  p {padding:10px; color:white;}

</style>

<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<p style="background-color:red">HTML</p>

<p style="background-color:blue">CSS</p>

<p style="background-color:green">JS</p>

<button>p 요소 배경색 코드 보기</button>

결과보기

※ 주의: background-color 대신 background 속성 사용하면 이 안에 포함된 모든 속성의 값을 반환.

CSS 속성값 설정

• 1개 속성만 설정 (예: 배경색)
• 여러 속성 설정 (예: 배경색과 글자크기)

---

1개 속성만 설정 (예: 배경색)

 

<style>

p { color:white; padding:20px}

.black {background:black}

.red {background:red}

.blue {background:blue} 

</style>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").css("background-color", "yellow");

        $("p").css("color", "black");      

    });

});

</script>

<p class="black">홈짱닷컴</p>

<p class="red">Homzzang.com</p>

<p class="blue">홈페이지 제작관리</p>

<button>클릭</button>

 

결과보기

---

여러 속성 설정 (예: 배경색과 글자크기)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

         $("p").css({'background-color': 'magenta', 'font-size': '150%'}); // 방법1 : 여러 속성값 설정
         $("p").css({backgroundColor: "magenta", fontSize: "150%"}); // 방법2 : 여러 속성값 설정       

    });

});

</script>

<style>

  p {padding:10px; color:white;}

</style>

<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<p style="background-color:red">HTML</p>

<p style="background-color:blue">CSS</p>

<p style="background-color:green">JS</p>

<button>p 요소 배경색 코드 보기</button>

결과 보기