css( ) 메소드

• 문서 객체의 스타일을 검사하거나 변경할 때 사용

css 속성 변경

1. 메소드 체이닝 방식

$(".first").css("color", "black");
$(".first").css("color", "blue").css("background", "green");

1. 객체 방식

$(".first").css({"font-size":"3em", "background":"tomato"});

            var styleObj = {
                "opacity": 0.5,
                "text-shadow": "2px 2px 2px black"
            }
$(".first").css(styleObj);

attr( ) 메소드

• 문서 객체의 특정 속성 값을 알아내거나 속성을 추가할 때 사용한다.
• 속성 값이 셋팅되어 있지 않으면, undefined를 리턴한다.

attr → 속성값을 리턴 및 설정

removeAttr → 객체의 속성을 제거

<img src="sample/image/flower1.PNG" width="400px" height="300px"><br>
    <img src="sample/image/flower3.PNG" width="400px" height="300px"><br>
    <button onclick="changeImgSrc();">사진 src 속성값 변경</button>
    <script>
        $(function(){

            /* 속성명에 해당하는 속성 값을 리턴 */
            /* 선택자가 여러 요소를 리턴!하라고 하는 경우, 첫번째 요소의 값만 리턴한다. */
            var imgSrc = $('img').attr('src');
            console.log("사진 경로: " + imgSrc);

            /* 객체를 통해 여러 속성을 설정 */
            $("img").attr({"width":"100px", "height":"50px"});

            /* 객체의 속성을 제거 */
            // $("img").removeAttr("width").removeAttr("height");   // 원본 크기로 나옴
        });
        function changeImgSrc(){
            $("img").attr("src", "sample/image/flower4.PNG");
        }
    </script>

prop( ) 메소드

• 속성 값의 여부를 true/false로 리턴함