not set

jQuery 문서 객체의 스타일 본문

javascript/jQuery

jQuery 문서 객체의 스타일

다크곰 2012. 2. 3. 15:31

1. $(selector).css(name, value);
2. $(selector).css(name, function(index, style) { } );
3. $(selector).css(object); 

<!doctype html>

<html>

<head>

    <title>jquery test</title>

    <script src="http://code.jquery.com/jquery-1.7.js"></script>

    <style>

        .first  { color:red;    }

        .second { color:pink;   }

        .third  { color:orange; }

    </style>

</head>

<body>

<script>

    $(document).ready(function () {

    });

</script>

    <h1 class="first">Header-0</h1>

    <h1 class="second">Header-1</h1>

    <h1 class="third">Header-2</h1>

</body>

</html>


응용 예제)

<script>

    $(document).ready(function () {

$('h1').css('color', 'red');

    });

</script>

<script>

        // 변수 선언

        var color = {'red', 'white', 'purple'};


        // 문서 객체의 스타일을 변경한다.

        $('h1').css('color', function(index) {

            return color[index];

        });

</script>

<script>

        // 변수 선언

        var color = {'red', 'white', 'purple'};

        $('h1').css({

            color: function(index) {

                return color[index];

            },

            backgroundColor: 'black'

        });

</script> 


본문 출처 : 모던 웹을 위한 Javascript 입문 및 jQuery입문 
저작자표시

'javascript > jQuery' 카테고리의 다른 글

jQuery 문서 객체의 생성  (0) 2012.02.03
jQuery html(), text()  (0) 2012.02.03
jQuery 객체 클래스 속성추가(addClass), 제거(removeClass), 속성검사(attr), 제거(removeAttr(name))  (0) 2012.02.02
jQuery find()  (0) 2012.01.31
jQuery 객체 확장 $.extend  (0) 2012.01.31
'javascript/jQuery' Related Articles more