jquery로 img 이미지를 수정하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery로 img 이미지를 수정하는 방법

PHPz

Apr 26, 2023 pm 02:22 PM

jQuery는 프론트엔드 개발에 널리 사용되는 JavaScript 라이브러리로, HTML 요소를 쉽게 조작할 수 있는 풍부한 API를 제공합니다. 프런트 엔드 개발에서는 웹 페이지의 이미지를 수정해야 하는 경우가 많습니다. 이 기사에서는 jQuery를 사용하여 요소의 src 속성을 수정하여 이미지를 바꾸는 방법을 소개합니다.

1. .attr() 메서드를 사용하여 이미지 src 속성을 수정합니다.

jQuery는 HTML 요소의 속성 값을 가져오거나 설정하는 .attr() 메서드를 제공합니다. 이 메소드는 요소의 src 속성을 수정할 수 있습니다. 다음은 간단한 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery修改图片</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //点击按钮时，修改图片的src属性
            $("#btn").click(function(){
                $("img").attr("src","new_image.jpg");
            });
        });
    </script>
</head>
<body>
    <img src="old_image.jpg">
    <button id="btn">替换图片</button>
</body>
</html>

로그인 후 복사

위 코드에서는 버튼을 클릭하면 이미지의 src 속성이 수정됩니다. .attr() 메소드를 사용할 때 첫 번째 매개변수는 수정할 속성 이름이고, 두 번째 매개변수는 설정할 속성 값입니다. 코드를 실행한 후 버튼을 클릭하면 이미지가 "new_image.jpg"라는 새 이미지로 교체됩니다. 새 이미지 파일이 존재하고 이전 이미지 파일과 동일한 디렉터리에 있는지 확인해야 합니다.

2.prop() 메서드를 사용하여 이미지의 src 속성을 수정합니다

.attr() 메서드를 사용하는 것 외에도 .prop() 메서드를 사용하여 이미지의 src 속성을 수정할 수도 있습니다. . .prop() 메소드는 속성 값을 가져오거나 설정하는 데 사용되는 동시에 .disabled 및 .checked 속성과 같은 HTML 요소의 고유 속성을 수정하는 데에도 사용할 수 있습니다. 다음은 .prop() 메소드를 사용하여 이미지 교체를 구현하는 예입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery修改图片</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //点击按钮时，修改图片的src属性
            $("#btn").click(function(){
                $("img").prop("src","new_image.jpg");
            });
        });
    </script>
</head>
<body>
    <img src="old_image.jpg">
    <button id="btn">替换图片</button>
</body>
</html>

로그인 후 복사

위 코드는 기본적으로 .attr() 메소드를 사용한 예와 동일합니다. 유일한 차이점은 .prop() 메서드를 사용하여 이미지의 src 속성을 수정한다는 것입니다. 마찬가지로 버튼을 클릭하면 이미지가 "new_image.jpg"라는 새 이미지로 대체됩니다.

요약

이 글에서는 jQuery를 통해 요소의 src 속성을 수정하여 이미지를 교체하는 두 가지 방법을 소개합니다. 이 기능은 .attr() 메서드와 .prop() 메서드를 모두 사용하여 구현할 수 있습니다. 어떤 방법을 선택하든 먼저 선택기를 사용하여 수정해야 하는 이미지 요소를 선택한 다음 해당 방법을 사용하여 src 속성을 수정해야 합니다. 교체된 새 이미지는 동일한 디렉터리에 있어야 하며, 그렇지 않으면 표시되지 않습니다.

위 내용은 jquery로 img 이미지를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.