본문 바로가기
구글

문서객체 메서드-css메서드

by 궁금증해결소 2020. 9. 17.

객체 조작 메서드

객체르르 생성, 복제, 삭제, 속성 변환하는 객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있습니다. 속성조작 메서드는 요소의 속성을 바꿀때 사용하고 수치 조작 메서드는 요소의 너빗갓 또는 높잇값 같은 수치를 바꿀때 사용합니다. 이 두 메서드는 선택한 요소의 속성을 바꾸는 메서드이므로 성격이 비슷하다라고 볼 수 있습니다. 그리고 객체 편집 메서드는 말 그대로 객체를 생성하거나 삭제 또는 복제 할 때 사용합니다.


* 메서드문법

1. 매개변수가 없는 경우 : 메서드명()

2. 매개변수가 한개 : 메서드명(값)

3. 매개변수가 여러개 : 메서드명(값,값,값)

4. 매개변수가 함수

    메서드명(function(){

        //코드의 집합

    })

5. 매개변수가 표집합화(객체)

    메서드명({

        옵션: 값,

        옵션: 값

    })


css메서드의 게터

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="UTF-8">

        <title>제이쿼리 메서드</title>

        <script src="jquery-1.12.0.min.js"></script>

        <script>

            //준비구문 : 문서객체(body)를 준비시키고 스크립트 실행

            $(document).ready(function(){

                //메서드 : 객체에 주는 명령(동작)

                //문법 : 객체선택.메서드명(매개변수);

                //1. 게터 : 값을 얻어오는 메서드

                //2. 세터 : 값을 변경하는 메서드

                

                //css() : 문서객체의 스타일을 컨트롤하는 메서드

                //게터 : 스타일값을 얻어옴

                //css('속성명')

                

                var c = $('h1').css('color');

                var fs = $('h1').css('fontSize');

                

                alert(c);

                alert(fs);

            });

        </script>

    </head>

    <body>

        <h1>제목태그</h1>

    </body>

</html>


css메서드의 세터1

<script>

     //준비구문 : 문서객체(body)를 준비시키고 스크립트 실행

     $(document).ready(function(){

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

     });

</script>


css메서드의 세터2

<script>

     $(document).ready(function(){

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

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

           return (index + 1) * 10;

     });

});

</script>


css메서드의 세터3

<script>

    $(document).ready(function(){

           $('h1').css({

            color: 'red',

                fontSize: 100

           });

                

    });

</script>

댓글