Добавить несколько строк CSS с JavaScript того же свойства

Я пытаюсь добавить несколько строк CSS для одного и того же свойства (переполнение для нескольких браузеров), но я вижу только последнее добавление.Добавить несколько строк CSS с JavaScript того же свойства

Я понимаю, почему это происходит, но я не знаю, как это исправить. Изменение = в += тоже не сработало. Как мне изменить это, чтобы все они были правильно добавлены?

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

Что нужно написать, чтобы все значения были добавлены в добавочное vraible и добавили, что для ribbon.style.background обычно любой браузер будет использовать собственный эквивалент? – Bernhard

Почему бы не создать новый класс в CSS со всеми этими стилями, а затем просто добавить или удалить класс в элемент? – Coop

Вам необходимо было бы его обнаружить. Что-то вроде:

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 
}

Следует отметить, что -ms-linear-gradient никогда не существовало: IE9 не поддерживает градиенты, IE10 полностью поддерживает их.

Конечно, вы можете просто поставить стили в классе и добавить этот класс к вашему элементу;)

источник

2013-09-27 13:34:52

** ПОЧЕМУ? ** Это не имеет никакого смысла. – Prinzhorn

@Prinzhorn Какая часть не имеет смысла? Если браузер не может понять значение, которое вы ему даете, оно либо выведет его, либо установит его в «none». Или с ошибкой, лучше отредактируйте, чтобы поймать это. –

Вы ничего не набираете, выполняя эти проверки. Он отлично работает, как OP закодировал его. – Prinzhorn

Добавить несколько строк CSS с JavaScript того же свойства

ответ

Смежные вопросы