HTML의 단추 배경을 변경하는 기능

웹 페이지의 버튼에주의를 끌기를 원할 경우 "입력"태그를 사용하여 HTML 코드에 버튼을 추가하기 만하면됩니다. 기본적으로 버튼에는 검은 색 배경의 회색 배경이 있습니다. 간단한 JavaScript 기능을 사용하면 지루한 버튼 배경을 다채로운 배경으로 변경하거나 원하는 이미지로 꾸밀 수 있습니다.

버튼 만들기

CSS 서식을 지정하지 않으면 기본 웹 페이지 단추를 만드는 데 필요한 코드가 다음과 같이 나타납니다.

다음과 같이 단추의 배경을 노란색으로 설정하는 CSS 클래스 참조를 추가 할 수 있습니다.

다음 CSS 클래스는 문서의 스타일 섹션에 배치되어 해당 클래스를 만듭니다.

.styleButton {배경색 : 노란색;}

"노란색"을 유효한 HTML 색상으로 변경하여 원하는 모양을 만드십시오. 대신 다음 CSS 코드를 사용하여 단추의 배경에 이미지를 추가 할 수 있습니다.

.styleButton {background-image : url ( 'myImage.jpg');}

"myImage.jpg"는 웹의 이미지 URL 또는 웹 서버의 이미지 URL로 바꿉니다.

함수 매개 변수

다음 예제는 버튼의 배경을 변경하는 함수의 프레임 워크를 보여줍니다.

함수 changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// 버튼의 배경 이미지 변경}

else {// 버튼의 배경색 변경}}

이 함수는 세 개의 매개 변수를 허용합니다. buttonID는 변경하고자하는 버튼의 ID를 가지고 있습니다. backgroundType 변수의 값은 "color"또는 "image"일 수 있습니다. 마지막 매개 변수 인 buttonBackground는 단추에 추가 할 색상이나 이미지의 URL을 보유합니다. 이 코드는 "image"를 backgroundType의 값으로 전달하면 첫 번째 "if"블록에 정의 된 논리를 처리합니다. 그렇지 않으면 "else"블록의 명령문을 실행하고 버튼의 배경색을 변경합니다.

코드 논리

다음 코드는 배경 이미지를 버튼에 추가하거나 backgroundType 매개 변수에 전달 된 값에 따라 배경색을 변경하는 데 필요한 명령문을 나열합니다.

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// 버튼의 배경 이미지 변경 var urlValue = "URL ( '"+ buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// 버튼의 배경색을 변경합니다. document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

함수를 호출하여 backgroundType "image"를 전달하면 코드는 버튼의 backgroundImage 특성을 buttonBackground 변수에 전달 된 색상으로 설정합니다. 그렇지 않은 경우 코드는 buttonBackground 변수에 전달 된 색상으로 버튼의 backgroundColor 특성을 설정합니다.

팁

이 기능을 사용하여 배경에 이미지를 추가 할 때는 단추 안에 들어갈만큼 작은 이미지를 선택하십시오. HTML은 페이지 요소없이 이미지의 크기를 줄이지 않습니다. 또한 작은 애니메이션 GIFS를 추가하여 단추 배경을 움직이거나 맥박 또는 빛나게 할 수 있습니다. 복잡한 이미지를 단추에 배치 할 때는 단추에 텍스트가있는 경우 단추의 텍스트를 읽기 어려울 수 있으므로주의하십시오.