동일한 속성의 자바 스크립트로 여러 행의 CSS 추가하기

동일한 속성 (여러 브라우저에 대해 과도하게 적용)에 대해 여러 행의 CSS를 추가하려고하는데 첨부 된 마지막 행만 볼 수 있습니다.동일한 속성의 자바 스크립트로 여러 행의 CSS 추가하기

왜 이런지 알지만 해결 방법에 대한 단서가 없습니다. =을 +=으로 변경해도 작동하지 않았습니다. 이 모든 것을 어떻게 바꿔서 모두 올바르게 추가해야합니까?

ribbon.style.background = '-webkit-linear-gradient(left, ' + config.ribbonColorStart + ' 0%, ' + config.ribbonColorEnd + ' 100%)'; 
    ribbon.style.background = '-moz-linear-gradient(left, ' + config.ribbonColorStart + ' 0%, ' + config.ribbonColorEnd + ' 100%)'; 
    ribbon.style.background = '-o-linear-gradient(left, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)'; 
    ribbon.style.background = '-ms-linear-gradient(left, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)'; 
    ribbon.style.background = 'linear-gradient(to right, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';

출처

2013-09-27 Rene Pot

수정하지 않아도됩니다. 모든 브라우저는 해석 할 수있는 브라우저를 허용합니다. – Prinzhorn

무엇이 모든 값을 추가 할 수있는 값으로 쓰고 리본에 덧붙입니다. 스타일. 백 그라운드는 일반적으로 모든 브라우저에서 사용합니다. – Bernhard

CSS에서 모든 스타일로 새 클래스를 만든 다음 요소에 클래스를 추가하거나 제거하면 어떻습니까? – Coop

브라우저에서 검색해야합니다. -ms-linear-gradient가 존재하지 않았던 것을 주목해야한다

try { 
    ribbon.style.backgroundImage = "linear-gradient(...)"; 
    if(!ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none") 
    ribbon.style.backgroundImage = "-webkit-linear-gradient(...)"; 
    if(!ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none") 
    ribbon.style.backgroundImage = "-moz-linear-gradient(...)"; 
    if(!ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none") 
    ribbon.style.backgroundImage = "-o-linear-gradient(...)"; 
    if(!ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none") 
    // gradient not supported, fall back here 
} 
catch(e) { 
    // gradient not supported and browser does't like bad values. Fall back here 
}

: 같은 IE9 그라데이션을 지원하지 않았다가, IE10은 완전히를 지원합니다.

물론 스타일을 클래스에 넣고 해당 클래스를 요소에 추가 할 수 있습니다.

출처

2013-09-27 13:34:52

** 왜? ** 이것은 의미가 없습니다. – Prinzhorn

@Prinzhorn 어떤 부분이 이해가되지 않습니까? 브라우저가 제공 한 값을 브라우저가 이해할 수 없으면 브라우저는이를 비우거나 "none"으로 설정합니다. 또는 오류가 발생하면 오류를 수정하여 더 잘 편집하십시오. –

이 검사를 통해 아무 것도 얻지 못하고 있습니다. 그것은 OP가 코딩 한 방식으로 완벽하게 작동합니다. – Prinzhorn

동일한 속성의 자바 스크립트로 여러 행의 CSS 추가하기

답변

관련 문제