자바 스크립트를 사용하여 그라디언트 변경하기

-2

여기서 내가 시도하는 것은 사용자가 배경을 변경하도록 선택할 수있는 다중 선택 옵션을 갖는 것입니다. 단색 배경이 아니라 그라데이션 배경입니다. 사용자 입력은 방사형 버튼이며 colorthatisbeingchanged()를 사용하도록 onClick을 설정했습니다. 그런 다음이 함수는 배경 그라디언트 색상을 변경하는 데 사용됩니다. 변경할 변수를 할당하는 방법에 대해 생각했지만 CSS 내에서 변수를 사용하는 방법을 모르겠습니다. 나는 또한 이와 같은 시도를 시도했지만 어느 쪽도 효과가 없었다. 몸에자바 스크립트를 사용하여 그라디언트 변경하기

 document.getElementById("body1").style.background = radial-gradient(red, black);

내 CSS 읽 전체 사이트가 Here를 클릭하여 볼 수

 #body1 
{ 

    height: 137%; 

    margin: 0; 
    margin-bottom: 0; 
    margin-top: 0; 
    margin-left: 0; 
    margin-right: 0; 

    background-repeat: no-repeat; 
    background-attachment: fixed; 

    background: -webkit-radial-gradient(purple, black); 
    background: -o-radial-gradient(purple, black); 
    background: -moz-radial-gradient(purple, black); 
    background: radial-gradient(purple, black); 
    }

를 들어 나는 결국 더 질문을 돌아올 것이라 확신합니다.

감사합니다. 모두들! 자바 스크립트에서 -Blake

출처

2014-03-25 user3460444

우리는 그 파일을 볼 수있는 권한이 있어야합니다. – Albzi

당신이 사이트를 링크하지 않는 것이 좋을 것 같습니다. 그렇지 않으면 링크가 죽어서 유사한 문제가있는 모든 사용자에게 리소스가 완전히 중복됩니다. 문제의 모든 관련 코드를 직접 포함하고 [** jsFiddle **] (http://jsFiddle.net) (또는 유사한)을 사용하여 격리 된 데모를 만들어 문제를 설명하십시오. – Nope

다른 그라디언트 스타일을 별도의 클래스, 즉'.gradient1, .gradient2'로 분리하여'# body1 {}'대신 분명히 의미있는 이름을 부여하고 대신 자바 스크립트를 사용하여 클래스를 전환 할 수 있습니다. 그렇게하면 프리젠 테이션 (CSS)과 로직 (JavaScript)이 분리되어 유지됩니다. 또한 코드를보다 관리하기 쉽게 만듭니다. 해당 클래스의 스타일 만 업데이트해야하는 경우 스크립트가 변경되지 않습니다. – Nope

는, 문자열은 따옴표로 구분해야합니다

target.style.backgroundImage = "radial-gradient(red, black)";

Demo

출처

2014-03-25 16:05:52 Oriol

자바 스크립트를 사용하여 그라디언트 변경하기

답변

관련 문제