Как поставить !important в css с jQuery?

· jQuery и Снипеты · 2 мин чтения

Есть множество вариантов того как можно поставить !important для элемента с использованием jQuery. Некоторые из них, я рассмотрю ниже.

Демо

Это демо было создано с помощью функции, которая описана ниже в этой записи.

Первый вариант (jQuery)

Первый вариант — это специально написанный плагин, который вам поможет в установлении !important свойства для элементов на странице.

  1. Для начала вам нужно скачать файл.
  2. После чего подключить его перед </body> — <script src="/путь/до/скрипта/jQuery.style.js"></script>.
  3. Далее вы можете его использовать. Подробнее о том как использовать смотрите ниже.

Код

<script> 
    $('.element').style('background-color', 'red', 'important');
</script>

Код выше добавит !important для background-color: red. В итоге у элемента .element появится style атрибут с background-color: red !important;.

Второй вариант (jQuery)

Вы так же можете добавить свойство !important с использованием внутренней функции jQuery —  .attr().

Код для .attr()

<script>
  $('.element').attr('style', 'width: 100px !important');
</script>

Скрипт выше сделает тоже самое, что и в первом варианте, но если на элементе .element уже имеет какие-то стили, которые установлены с помощью style, то они будут заменены на новые (которое было прописано через .attr()).

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

<script>
  $('.element').attr('style', $('.element').attr('style') + ';' + 'width: 100px !important');
</script> 

А вот функция, которая может кому-то пригодиться, если вам лень постоянно прописывать тоже самое:

Код функции

// Добавить ширину для .element
addImportantStyle('.element', 'width: 100px !important;');

// Добавить border и высоту для .element
addImportantStyle('.element', 'border: 1px solid #000; height: 50px !important;')

function addImportantStyle(element, style) {
  var $el = $(element).attr('style');
  
  // For some browsers, `attr` is undefined; for others,
  // `attr` is false.  Check for both.
  if ($(element).attr('style') !== '' ) {
      $(element).attr('style', $(element).attr('style') + ';' + style);
  } else {
    $(element).attr('style', style);
  }
    
}