• Q&A
  • 회원가입
  • 로그인

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

264  

목차

  1. CSS 속성값 반환. 
  2. CSS 속성값 설정. (1개 속성 경우) 
  3. 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개 속성 경우) 

※ 배경색만 설정.

 

<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>

 

결과보기

 

CSS 속성값 설정 (여러 속성 경우) 

※ 배경색과 글자 크기 설정.

 

<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>


결과 보기



찾아주셔서 감사합니다. Since 2012