티스토리 뷰

(기초)그래서 뭘 배운거야?/jQuery

JQ-13-객체조작메서드(attribute)

Soheny.P 2021. 10. 13. 22:47
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/JS/jquery-3.6.0.min.js"></script>
</head>

<body>
    <h1><strong>객체 조작 및 생성</strong></h1>
    <section id="sec_1">
        <h2>이미지 속성</h2>
        <p><img src="img/math_img_1.jpg" alt="가위" border></p>
    </section>

    <script>
        $(function () {
            let srcVal = $("#sec_1 img").attr("src");
            console.log(srcVal); //img/math_img_1.jpg

            // #sec_1 img 속성을 아래처럼 변경
            $("#sec_1 img").attr({
                // 너비 200
                "width": 200,
                // src 를 사진 2로 변경
                "src": srcVal.replace("1.jpg", "2.jpg"),
                // alt 문구 변경
                "alt": "바위"
                // border라는 속성 제거
            }).removeAttr("border");
        });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > jQuery' 카테고리의 다른 글

JQ-14-객체조작메서드(class / text)  (0) 2021.10.13
JQ-12-객체조작메서드(html() / text())  (0) 2021.10.13
JQ-11-Selector : 속성 선택자(7)  (0) 2021.10.12
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
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
27 28 29 30 31
글 보관함