목차
CSS 속성값 반환 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>
결과보기
여러 속성 설정 (예: 배경색과 글자크기)
<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>
결과 보기
