> 웹 프론트엔드 > CSS 튜토리얼 > If-Else 조건을 사용하여 JavaScript로 Div의 배경 이미지를 동적으로 변경하는 방법은 무엇입니까?

If-Else 조건을 사용하여 JavaScript로 Div의 배경 이미지를 동적으로 변경하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-02 10:03:30
원래의
986명이 탐색했습니다.

How to Dynamically Change a Div's Background Image with JavaScript Using an If-Else Condition?

JavaScript로 Div 배경 이미지 변경

질문:

배경을 어떻게 변경할 수 있나요? if-else 조건을 사용하는 JavaScript가 포함된 div 요소의 이미지

코드 조각:

<code class="html"><div style="text-align:center;">
  <div class="ghor" id="a" onclick="chek_mark()"></div>
  function call
</div>
<script type="text/javascript">
  function chek_mark() {
    var el = document.getElementById("a").style.backgroundImage;
    if (el.url("Black-Wallpaper.jpg")) {
      el.url = "cross1.png";
    } else if (el.url("cross1.png")) {
      alert("<h1>This is working too.</h1>");
    }
  }
</script></code>
로그인 후 복사

설명:

목표는 현재 배경 이미지를 기반으로 "ghor" 클래스로 div의 배경 이미지를 업데이트하는 것입니다.

답변:

이를 달성하려면, 다음 코드를 사용할 수 있습니다.

<code class="javascript">document.getElementById('a').style.backgroundImage="url(images/img.jpg)";</code>
로그인 후 복사

설명:

이 코드는 ID가 "a"인 div 요소를 검색하고 배경 이미지 스타일 속성을 다음으로 설정합니다. 지정된 이미지 경로. "images/img.jpg"를 원하는 이미지 경로로 바꾸면 배경 이미지를 동적으로 변경할 수 있습니다.

'.ghor' 클래스에 대한 샘플 CSS:

<code class="css">.ghor {
    background-image: url('Black-Wallpaper.jpg');
    background-size: cover;
    border-radius: 5px;
    height: 100px;
    width: 100px;
    box-shadow: 2px 5px 7px 7px white;
    display:inline-block; 
}</code>
로그인 후 복사

제공된 코드는 설명을 위한 것이며 특정 구현 및 CSS 스타일에 따라 조정이 필요할 수 있습니다.

위 내용은 If-Else 조건을 사용하여 JavaScript로 Div의 배경 이미지를 동적으로 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿