728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220425/css1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>css 함수</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
let color = ["red", "white", "purple"]
// $("h1").each(function(i, item){
// $(this).css("color", color[i])
// })
// $.each(color,function(i,c){
// $("h1:eq(" + i + ")").css("color", c)
// })
// $("h1").css("color",function(index){ //index : h1태그의 인덱스. 순서
// return color[index]
// }).css("background", "black")
$("h1").css({"color" : function(index){ //index : h1태그의 인덱스. 순서
return color[index]}, "background" : "black"})
alert($("h1:eq(0)").css("color")) //h1태그의 첫번째 색상값 조회
})
</script>
</head>
<body>
<h1>Header-0:red</h1>
<h1>Header-1:white</h1>
<h1>Header-2:purple</h1>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery event1 (on, mouseenter, mouseleave) (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery attr 함수 (0) | 2022.04.25 |
| [Jquery] 21. Jquery each 함수(let arr=, $.each) (0) | 2022.04.22 |
| [Jquery] 21. Jquery 반복문 (nth-child, odd, even, $.each(), let colors = []) (0) | 2022.04.22 |
| [Jquery] 21. Jquery table 태그 다루기(nth-child, tr:first, tr:last, tr:eq) (0) | 2022.04.22 |