[jQuery] 속성값 읽기

형이·2023년 8월 17일
jquery

jQuery

목록 보기
5/14
post-thumbnail

📝 jQuery

🖥️ 1. 속성값 읽기

1-1. attr() 함수 활용

  • HTML 태그 요소의 특정 속성값을 얻기 위해서는 attr() 함수 사용
    let 변수 = $("요소").attr("속성이름");


    $("요소").attr("속성이름","값");


    $("요소").attr({
        "속성이름1" : "값",
        "속성이름2" : "값",
        "속성이름3" : "값"
    });

📝 예제

EX)

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
    <style>
        /* 전체 여백 제거 */
        *  { margin: 0; padding: 0; }

        /* 목록정의 태그 */
        ul { list-style: none; }

        /* float 처리용 클래스 및 마감제 클래스 정의 */
        .pull-left { float: left; }
        .clearfix:after { display: block; content: ''; clear: both; float: none; }
        
        /* 바깥의 박스 */
        .preview-box { margin: auto; width: 470px;
        			   border: 3px solid #d5d5d5; padding: 10px; }

        /* 큰 이미지 영역 */
        .preview { width: 100%; height: 470px; margin-bottom: 5px; }

        /* 목록정의 아이템 크기, 여백설정(왼쪽마진) */
        .item { width: 70px; height: 70px; margin-left: 10px; }

        /* 목록정의 첫 번째 항목은 왼쪽마진 제거 */
        .item:first-child { margin-left: 0; }

        /* 작은 크기의 이미지 사이즈 설정 및 마우스 커서 모양 설정 */
        .thumbnail { width: 100%; height: 100%; cursor: pointer; }
    </style>
</head>

<body>
    <div class='preview-box'>
        <img src="img/captainamerica.png" class="preview" id="target" />
        <ul class="list clearfix">
            <li class='item pull-left'>
            	<img src="img/captainamerica.png" class='thumbnail' />
            </li>
            <li class='item pull-left'>
            	<img src="img/batman.png" class='thumbnail' />
            </li>
            <li class='item pull-left'>
            	<img src="img/spiderman.png" class='thumbnail' />
            </li>
            <li class='item pull-left'>
            	<img src="img/thor.png" class='thumbnail' />
            </li>
            <li class='item pull-left'>
            	<img src="img/hulk.png" class='thumbnail' />
            </li>
            <li class='item pull-left'>
            	<img src="img/ironman.png" class='thumbnail' />
            </li>
        </ul>
    </div>
    <script>
        $(".thumbnail").click(function(){
            let pv = $(this).attr("src");
            // console.log(pv);  오류 없는지 확인
            $("#target").attr('src', pv);
        });
    </script>
</body>
profile
형이
이전 포스트

[jQuery] HTML 속성 제어

다음 포스트

[jQuery] .hide() .show() 메소드

0개의 댓글