출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.

css( ) 메소드는 선택된 요소의 하나 또는 이상의 스타일 속성을 set 또는 리턴한다.

CSS 속성의 세부적인 값을 리턴하기 위해, 아래 문법을 사용한다.


-> css("propertyname");


css 속성 리턴하는 예제)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("background color = " + $("p").css("background-color"));
    });
});
</script>
</head>
<body>
 
<h2>This is a heading</h2>
 
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
 
<button>Return background-color of p</button>
 
</body>
</html>
cs


CSS 속성 set 예제)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css("background-color", "lightblue");
    });
});
</script>
</head>
<body>
 
<h2>This is a heading</h2>
 
<p style="background-color:#ff0000">p1</p>
<p style="background-color:#00ff00">p2</p>
<p style="background-color:#0000ff">p3</p>
 
<p>This is a paragraph.</p>
 
<button>Set background-color of p</button>
 
</body>
</html>
 
cs


연습문제

1. css( ) 메소드를 사용해서 p태그에 분홍색 배경을 추가하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").css("background-color", "pink");
});
</script>
</head>
<body>
 
<p>This is a paragraph.</p>
 
</body>
</html>
 
cs



2. css( ) 메소드를 사용해서 5픽셀, 파란 dotted border를 p태그에 추가하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").css("border", "5px dotted blue");
});
</script>
</head>
<body>
 
<p>This is a paragraph.</p>
 
</body>
</html>
 
cs


3. p태그의 배경 값을 alert 창으로 return 하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    alert($("p").css("background-color"));
});
</script>
</head>
<body>
 
<p style="background-color:yellow;">This is a paragraph.</p>
 
</body>
</html>
 
cs


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

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Traversing 가로지르기? 횡단하기? (1) ancestor  (0) 2017.08.22
jQuery Dimensions 면적, 치수  (0) 2017.08.20
jQuery Get and Set CSS 클래스들  (0) 2017.08.15
jQuery Remove 요소  (0) 2017.08.14
jQuery - Add Elements  (0) 2017.08.13

+ Recent posts

티스토리툴바