Jquery css несколько свойств: Установка сразу нескольких свойств css с помощью jQuery.

Leave a Comment / Css / By /

html — Переобьявление CSS-свойств — Stack Overflow на русском

Вопрос задан

Изменён 5 лет 6 месяцев назад

Просмотрен 104 раза

Подключая какую-нибудь стороннюю библиотеку, например Bootstrap, её CSS-свойства могут не совпасть с требуемыми к определённой странице. Допустим, в сторонней библиотеке написано

body {
  font-family: Arial
}

но по проекту необходимо использовать

body {
  font-family: Times New Roman
}

Что правильнее менять, если CSS-свойства библиотеки и родной таблицы стилей страницы конфликтуют? Изменить свойство в библиотеке, или добавить !important в родную таблицу стилей?

  • html
  • css
  • bootstrap

1

загрузите CSS файл проекта после библиотек и изменяйте там что и как захотите. Стили определённые позже перезаписывают предыдущие записи. Использовать !important или влезать в стили самих библиотек редко когда пригождается

2

Если два варианта. 1. !important, при чем important можно использовать несколько, пример

.p{ 
   font-family: Times New Roman!important!important; /*но это не желательно*/
}

2. Без important. Вместо important можно задавать блоки родительских элементов.
Пример:

<ul>
    <li>
        <p>Текст пример...</p>
    </li>
</ul>

в CSS:

ul li .p{
    font-family: Times New Roman;
}

т.е. можете хоть html и body указывать.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как использовать CSS-метод jQuery? | Кевин Чисхолм

CSS-метод jQuery позволяет стилизовать один или несколько элементов DOM.

Как интерфейсный веб-разработчик, вы должны обязательно ознакомиться с этим низкоуровневым DOM API. Но свойство HTMLElement.style связано с проблемами, две из которых самые большие:

  1. Синтаксис многословен, что приводит к повторяющемуся шаблонному коду.
  2. Вы не можете перезаписать HTMLElement.style собственно ty, что означает, что вы не можете произвольно присвоить ему объект.

Теперь, хотя то, что вы не можете перезаписать свойство HTMLElement.style, может показаться незначительной, это ограничение сводит на нет возможность назначать правильно созданный объект свойству стиля HTMLElement. Это также серьезно сводит к минимуму повторное использование кода.

Но метод jQuery CSS предоставляет мощный способ обойти причудливые ограничения Свойство HTMLElement.style

. Он предлагает возможность стилизовать элементы DOM значительно более элегантно и выразительно.

Во-первых, синтаксис основан на цепочке методов; вы связываете метод css() с результатом любого запроса jQuery. Таким образом, независимо от того, возвращает ли ваш запрос один или несколько элементов, свойство и значение стиля, которые вы передаете методу css(), будут применены к элементам, возвращенным вашим запросом. И в дополнение к более лаконичному синтаксису есть возможность повторного использования кода. И, наконец, кое-что, что часто упускается из виду в этом методе: вы напрямую стилизуете элемент DOM (в отличие от использования внешней таблицы стилей). В результате стили, которые вы применяете, будут обладать высокой специфичностью.

В своей самой простой форме метод jQuery.css() принимает два аргумента. Оба аргумента являются строками. Первый аргумент — это имя свойства CSS, которое вы хотите изменить. Второе свойство — это новое значение для этого свойства CSS. Когда вы выполняете метод CSS для одного или нескольких элементов DOM, jQuery добавляет атрибут стиля к каждому элементу DOM. Затем jQuery использует второй предоставленный вами аргумент в качестве значения этого свойства CSS.

Попробуйте сами!

В приведенном выше примере есть пять элементов абзаца. Щелкните каждый абзац. Когда вы это сделаете, вы увидите, что каждый выбранный элемент становится красным. Перейдите на вкладку JavaScript . В коде JavaScript вы увидите, что для каждого элемента абзаца настроен обработчик события клика. В результате при щелчке любого абзаца jQuery выполняет метод CSS для этого абзаца. Методу CSS передаются два аргумента. Первый аргумент — color , это свойство CSS, которое мы хотим изменить. Второй аргумент равен красный , новое значение для этого свойства CSS.

Итак, использованный до сих пор подход представляет собой очень простую реализацию метода css(). В этом случае мы передаем только две строки. Эти две строки действуют как пар ключ/значение для указанного свойства стиля. Но также можно передать объект методу css() . Примечательно, что этот подход позволяет вам стилизовать несколько свойств HTMLElement. Это, конечно, продвинутая реализация 9метод 0005 css() , о котором я расскажу в другой статье; на данный момент, это просто хорошо знать об этом.

Резюме

Итак, поработав немного с методом css(), я думаю, вы согласитесь, что это, пожалуй, одна из самых гениальных возможностей jQuery. Он освобождает вас от двух ограничений свойства HTMLElement.style, и в дополнение к элегантному синтаксису этот метод предоставляет способ повторного использования хорошо продуманного кода для стилизации нескольких элементов DOM. И если вы посмотрите на расширенный синтаксис, вы увидите, что несколько стилей также могут быть применены в одном вызове метода css().

Скидка 10%! — Используйте код KEVIN10

Подпишитесь на этот блог

Получайте уведомления по электронной почте о новых сообщениях.

Оставьте это пустым:Оставьте это поле тоже пустым:Не меняйте это:

Ваш адрес электронной почты:

 

Поиск в этом блоге
Искать:
Категории

АЯКС Веб-сервисы Amazon (AWS) Угловой Угловой 2 Угловые сервисы Массив. прототип Массивы Асинхронный Определение асинхронного модуля Магистраль Комбинаторы CSS CSS3 Экспресс JS Функции Gulp.js HTML5 Интернет Жасмин Джава JavaScript JavaScript-шаблоны Инструменты JavaScript Весенняя загрузка Java jQuery JSON Меньше CSS Мапбокс Мобильный MongoDB Node.js Шаблоны Node.js НПМ Объектно-ориентированный JavaScript Позиция Реагировать Реагировать на родной Строка.прототип Видео Веб-разработка Веб-производительность Веб-скрейпинг

Теги

ajax угловатый угловой.js множество асинхронный хребет backbone.js перезвонить Каскадные таблицы стилей сорт контекст css директива событие выражать функция функции как HTML HTML5 http JavaScript jquery json урок литералы карта модуль узел узел.js нпм объект объектно-ориентированный объекты упс Опытный образец требовать маршрут объем сервер одностраничное приложение спа этот руководство просмотр

Контактное лицо

Электронная почта : [email protected]

Телефон: : + 1 (212) 465-3196