티스토리 뷰

[개발]프로그래밍/jquery

[jquery] css() - 객체 스타일 검사, 추가

좋은 블로그 2016. 10. 11. 09:32

1. css() - 역할

스타일과 연관된 모든 것을 알아내거나 작업을 수행


2. 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
25
26
<style>
.t1{
    color:blue;
}
.t2{
    color:red;
}
.t3{
    color:green;
}
</style>
 
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    alert($('h1').css('color'));
});
</script>

<body>
<h1 class="t1"> test-1</h1>
<h1 class="t2"> test-2</h1>
<h1 class="t3"> test-3</h1>
</body> 





◈ 결과




◈ 설명


class 로 설정된 color의 값을 css() 를 이용하여 alert창을 찍어보면 위와 같은 결과가 나옵니다


같은 태그가 존재할 경우에는 제일 처음 발견된 태그의 css() 값을 alert 창에 나타납니다


3. css() - 스타일 추가 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').css('color','blue');
});
</script>

<body>
<h1> test-1</h1>
<h1> test-2</h1>
<h1> test-3</h1>
</body>




◈ 결과





4. css() - 스타일 추가 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    var test_color = ['green','blue','red'];
    
    $('h1').css('color',function(index){
        return test_color[index];
    });
});
</script>

<body>
    <h1> test-1</h1>
    <h1> test-2</h1>
    <h1> test-3</h1>
</body>




◈ 결과




◈ 설명


function 을 활용하여 위와 같이 index 여부에 따라서 배열로 입력한 색깔을 가져올수도 있습니다



5. css() - 스타일 추가 예제3

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    var test_color = ['green','blue','red'];
    
    $('h1').css(
        {
            color:function(index)
            {
                return test_color[index];
            },
            background:'yellow'
        });
});
</script>
 
<body>
    <h1> test-1</h1>
    <h1> test-2</h1>
    <h1> test-3</h1>
</body>




◈ 결과




◈ 설명


위와 같이 두개의 스타일을 동시에 지정할 수도 있습니다




'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] 객체 추가 - html()를 활용  (0) 2016.10.13
[jquery] html() , text() - 글자와 관련된 기능  (0) 2016.10.13
[jquery] attr() - 객체 속성 추가, 삭제  (0) 2016.10.11
[jquery] add() - 객체 추가 선택  (0) 2016.10.11
[jquery] eq(),first(),last() - 자주 쓰이는 객체 선택  (0) 2016.10.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday