이 게시물은 HTML DOM 스타일 'backgroundImage' 속성의 작동 및 사용법을 기록합니다.
JavaScript에서 HTML DOM 스타일 'backgroundImage' 속성을 사용하는 방법은 무엇입니까?
HTML DOM 스타일 ' 배경 이미지 ” 속성은 해당 경로를 참조하여 배경 이미지를 추가하여 HTML 요소와 문서를 사용자 정의하는 데 사용됩니다.
구문('backgroundImage' 속성 설정)
물체. 스타일 . 배경 이미지 = 'url('URL')|없음|초기|상속'위의 구문은 다음 'backgroundImage' 속성 값을 지원합니다.
- url('URL'): 원하는 배경 이미지의 위치를 지정합니다.
- 없음: 기본값, 즉 배경 이미지가 없음을 나타냅니다.
- 초기의: 브라우저의 기본값과 유사합니다.
- 상속: 부모 요소에서 속성을 상속합니다.
구문('backgroundImage' 속성의 반환 URL)
물체. 스타일 . 배경 이미지이 구문은 추가된 배경 이미지의 URL이 포함된 문자열 값을 반환합니다.
위에서 정의한 구문을 실제로 사용하여 스타일 'backgroundImage' 속성의 사용을 설명하겠습니다.
예제 1: 스타일 'backgroundImage' 속성을 적용하여 배경 이미지 설정
이 예는 ' 배경 이미지 ” 속성을 사용하여 URL을 지정하여 문서에 원하는 배경 이미지를 설정합니다.
HTML 코드
먼저 명시된 HTML 코드를 살펴보십시오.
< h2 > 사용 HTML DOM 스타일 JavaScript의 backgroundImage 속성 h2 >
< 버튼 클릭 = 'myFunc()' > 여기를 클릭하세요 단추 >
이 코드에서:
- “ ” 태그는 레벨 2의 부제목을 추가합니다.
- “ <버튼> ” 태그는 “가 붙은 버튼을 생성합니다. 온 클릭 ” 기능을 실행하는 이벤트 “ myFunc() ” 버튼 클릭 시.
자바스크립트 코드
다음으로 주어진 JavaScript 코드를 따르십시오.
< 스크립트 >함수 myFunc ( ) {
문서. 몸 . 스타일 . 배경 이미지 = 'url('./html&css/image.jpg')' ;
}
스크립트 >
위의 코드 조각에서:
- '라는 이름의 함수 myFunc() '로 정의됩니다.
- 그 정의에서 ' 스타일.배경 이미지 ” 속성은 지정된 “ URL ” 이미지를 전체 문서의 배경으로 바꿉니다.
산출
출력은 버튼 클릭 시 배경 이미지가 전체 문서에 추가되었음을 보여줍니다.
예 2: 스타일 'backgroundImage' 속성을 적용하여 배경 이미지의 URL 반환
“ 배경 이미지 ”속성은 배경 이미지의 URL을 반환하는 데에도 유용합니다. 실전에서 봅시다.
HTML 코드
먼저 작성된 HTML 코드를 살펴보십시오.
< h2 > 사용 HTML DOM 스타일 JavaScript의 backgroundImage 속성 h2 >< 사업부 ID = 'myDiv' 스타일 = '높이: 500px; 너비: 500px;
테두리: 3px 단색 검정;배경 이미지:url('./html&css/image.jpg')' > 이것 사업부입니다 사업부 >
< h4 아이디 = '데모' > h4 >
위의 코드 블록에서:
- “ 배경 이미지 ” 속성은 주어진 URL에 해당하는 배경 이미지를 추가하는 “” 요소에 사용됩니다.
- “ ” 요소는 추가된 배경 이미지의 반환 값(URL)을 표시하는 레벨 4의 빈 부제목을 생성합니다.
자바스크립트 코드
이제 JavaScript 코드로 진행합니다.
< 스크립트 >
이미지를 보자 = 문서. getElementById ( 'myDiv' ) . 스타일 . 배경 이미지 ;
문서. getElementById ( '데모' ) . innerHTML = 이미지 ;
스크립트 >이 코드 블록에서:
- 변수 선언 ' 이미지 ”를 사용하는 document.getElementById() ” 메서드를 사용하여 id “myDiv”를 통해 “” 요소에 액세스하고 “ 배경 이미지 ' 재산.
- 다음으로 'document.getElementById()' 메서드는 'demo' ID를 사용하여 빈 부제목을 가져와 추가된 배경 이미지의 URL을 표시합니다.
산출
출력에는 'div' 요소에 적용된 배경 이미지의 URL이 표시됩니다.
결론
자바스크립트는 ' 배경 이미지 ” 속성은 원하는 HTML 요소에 배경 이미지를 지정하거나 해당 URL을 반환합니다. 배경 이미지를 설정하기 위해 'initial', 'inherit', 'URL', 'none'의 4가지 속성 값을 지원합니다. 그러나 배경 이미지의 URL을 가져오는 값은 지원하지 않습니다. 이 게시물은 JavaScript에서 HTML DOM 스타일 'backgroundImage' 속성을 사용하는 방법에 대한 간략한 설명을 제공했습니다.