JavaScript에는 일반적으로 인터페이스에 더 잘 작동하는 어두운 배경과 같이 매력적인 레이아웃이 필요한 웹 페이지가 있습니다. 마찬가지로 흰색 배경을 사용하면 독자가 콘텐츠에 집중할 수 있으므로 뉴스 포털이나 블로그는 어두운 텍스트와 함께 비교적 밝은 배경을 사용합니다. 이러한 경우 JavaScript는 문서 디자인을 서식 지정하고 개선하는 데 매우 유용합니다.
이 기사에서는 JavaScript에서 배경 이미지를 변경하는 방법에 대해 설명합니다.
JavaScript에서 배경 이미지를 변경하는 방법은 무엇입니까?
JavaScript에서 배경 이미지를 변경하려면 다음 방법을 사용할 수 있습니다.
- ' 배경 이미지 '에 대한 속성 DOM '.
- ' getElementById() ' 방법 및 ' 배경 이미지 '에 대한 속성 절 '.
논의된 방법을 하나씩 살펴보세요!
방법 1: DOM의 backgroundImage 속성을 사용하여 JavaScript에서 배경 이미지 변경
' 배경 이미지 ” 속성은 지정된 요소의 배경 이미지를 조정합니다. 이 기술은 backgroundImage 속성을 적용하고 해당 경로를 인수로 지정하여 배경 이미지를 지정하여 적용할 수 있습니다.
통사론
위 구문에서 ' URL '는 이미지의 경로를 나타냅니다.
데모를 위해 다음 예를 보십시오.
예시
이 예에서 버튼은 지정된 값과 ' 클릭 '로 리디렉션되는 이벤트
backgroundImage()라는 함수:
이제 기능 ' 배경 이미지() '가 선언되고 ' document.body.style.backgroundImage ” 속성은 인수에 지정된 이미지 경로를 사용하여 배경 이미지에 액세스합니다.
위 구현의 결과는 다음과 같습니다.
방법 2: 단락의 getElementById() 메서드 및 backgroundImage 속성을 사용하여 JavaScript에서 배경 이미지 변경
' getElementById() ' 메서드는 지정된 값을 가진 요소를 반환하고 ' 배경 이미지 ” 속성은 위에서 설명한 대로 인수에 지정된 특정 요소의 배경 이미지를 반환합니다. 이 방법을 적용하여 특정 단락의 배경에 지정된 색상을 매핑할 수 있습니다.
통사론
여기, ' 집단 '는 요소의 id를 나타냅니다.
명시된 개념을 더 잘 이해하려면 다음 예를 살펴보세요.
예시
먼저
태그에 단락을 포함하고 특정 ID를 할당합니다.
다음으로 이전 메서드에서 설명한 것처럼 backgroundImage() 함수에 액세스하는 onclick 이벤트가 있는 버튼을 만듭니다.
마지막으로 ' 배경 이미지() ' 비슷하게. 여기에서 ' getElementById() ' 메서드를 선택하고 지정된 배경 이미지를 적용합니다. 그러면 단락의 배경에 색상이 구현됩니다.
산출
Javascript에서 배경 이미지를 변경하는 가장 쉬운 방법을 컴파일했습니다.
결론
Javascript에서 배경 이미지를 변경하려면 ' 배경 이미지 '에 대한 속성 DOM ' 기능을 사용하여 전체 웹페이지에 지정된 배경 이미지를 적용하거나 ' getElementById() ' 방법 및 적용 ' 배경 이미지 지정된 '의 '속성' 절 '. 이 블로그는 JavaScript에서 배경 이미지를 변경하는 방법을 보여줍니다.