자바스크립트에서 그라디언트 색상을 설정하는 방법

JavaScript에서는 스타일 개체 속성을 사용하여 그라데이션 색상을 설정할 수 있습니다. 구문 형식은 "element object.style.BackgroundImage='linear-gradient(angle, color, color)'"입니다. Style 개체는 별도의 개체를 나타냅니다. 스타일 진술.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

실제로 그래디언트의 구현은 궁극적으로 CSS(스타일)에 의해 제어됩니다.

모든 코드는 JS에서 직접 작성됩니다.

var test = document.getelementById(''test);
test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';

PS: 여기서 backgroundImage의 'i'는 대문자여야 하며 다음과 같이 작성해야 합니다. 이것은 JS에서 인식하지 못하는 CSS의 배경 이미지와 동일하게 작성할 수 없습니다.

확장 정보:

css로 작성한 후 js를 통해 요소에 클래스를 추가하여 새 스타일을 추가합니다.

스타일 시트에서 스타일 정의

css:

.jianbian{
background-image: linear-gradient(120deg, #155799, #159957);
}

그런 다음 js를 통해 요소에 클래스를 추가합니다.

js:

var test = document.getelementById(''test);
test.className = 'jianbian' ;

그렇습니다. 하지만 다양한 브라우저의 호환성과 그라디언트 작성 방법도 고려해야 합니다.

-webket-/-moz- 등

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 그라디언트 색상을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!