Есть множество вариантов того как можно поставить !important для элемента с использованием jQuery. Некоторые из них, я рассмотрю ниже.
Демо
Это демо было создано с помощью функции, которая описана ниже в этой записи.
Первый вариант (jQuery)
Первый вариант — это специально написанный плагин, который вам поможет в установлении !important
свойства для элементов на странице.
- Для начала вам нужно скачать файл.
- После чего подключить его перед
</body>
—<script src="/путь/до/скрипта/jQuery.style.js"></script>
. - Далее вы можете его использовать. Подробнее о том как использовать смотрите ниже.
Код
<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); } }