$ ('# el'). css ('position', 'static! важный') не работает в Firefox?

Question

У меня есть div, который я хочу «умной прокруткой» вверх и вниз со страницей. Он начинается с позиции, фиксированной, и я использую jQuery, чтобы определить, когда это изменить:

$('#el').css('position', 'static !important');

Прекрасно работает в Safari + Chrome, но не работает в Firefox. Любая причина, почему это будет?

Answer 1

Вы не можете установить! Важный, как это с jQuery, но с javascript вы можете сделать:

document.getElementById('el').style.position = "static !important";

Но, похоже, это работает только в некоторых браузерах, а именно в Webkit, и, возможно, поэтому ваш jQuery css также работает только в Chrome / Safari, поскольку они, вероятно, сделали некоторые обновления в библиотеке.

На предыдущих версиях jQuery, функция css (), когда содержала! Важный, насколько я знаю, абсолютно ничего не делала.

Единственный кросс-браузерный способ сделать это с помощью jQuery - cssText, что-то вроде:

$('#el').css('cssText', 'position: static !important');

Но имейте в виду, что cssText заменяет весь встроенный тег стиля, и все остальные стили, установленные таким образом, должны быть снова включены в cssText.

Лучший способ сделать это - использовать разные классы, например:

CSS:

.static_element {position: static!important;}

JQuery:

$("#el").addClass('static_element');

и так как он использует! Важный, он переопределит любую позицию, установленную для других классов / идентификаторов, пока они не установлены с! Важным, тогда они будут следовать обычному порядку правил CSS, и последнее добавленное правило будет прилипнет.

Хорошее правило - стараться вообще избегать использования! Important, если только нет абсолютно другого доступного решения, и в вашем примере использование двух классов с одним установленным на фиксированный, а другим с статическим, будет работать нормально, если для по какой-то странной причине просто установка позиции с помощью $ .css () без использования! Important не работает.

Answer 2

проблема не в проблеме jquery, а в действительности в ошибке javascript, поскольку изменение любого значения свойства стиля не отражает 100% атрибута style.cssText, единственное решение, которое я нашел, - это изменить атрибут стиля самостоятельно:

// using jquery
$('#el').attr('style', 'position:static !important');

или

// using native javascript
document.getElementById('el').setAttribute('style', 'position:static !important');

или изменение style.cssText

document.getElementById('el').style.cssText = 'position:static !important';

Answer 3

У jQuery есть проблема с чтением! Важное в css, если вы используете метод .css.Это можно исправить с помощью метода attr.

$('#el').attr('style', 'position:static !important');

Answer 4

Вам не нужно! Важный при установке свойства стиля элемента.Он уже переопределит все селекторы CSS, определенные по умолчанию.

Answer 5

Вам не нужен jQuery для этого.Примерно так работает в WebKit, но не в Gecko:

document.getElementById("x").style.color = "red !important";

По спецификации это не должно работать.Это просто ошибка в WebKit.