Блог

Имея div элемент, я могу придать его bg-цвет с помощью либо Javascript или CSS . Есть ли какая-либо разница между ними, или какой из них мы должны использовать?

 div:hover {background-color:gray;}
  

или

 $( div).hover(function() {
  $( this ).css('background-color','gray');//user Jquery here

});
  

Есть также много вещей, которые можно сделать с помощью JQ и CSS. Как мы выбираем, какой из них использовать?

Обычно вы используете CSS просто потому, что CSS предназначен для такого рода вещей. В версии JS / jQuery больше кода, и это подразумевает запуск движка JS и движка CSS. С CSS это просто движок CSS. Напомним, что для версии JS все равно потребуется версия CSS.

Однако бывают случаи, когда вам захочется изменить стили из JS, но обычно для более сложных взаимодействий, чем простое наведение курсора. Даже в этом случае вы захотите использовать JS только для изменения только класса CSS и добавления стилей на основе этих классов CSS.

Позвольте мне привести вам пару простых примеров:

1. Измените цвет текста при наведении курсора

Свойства CSS для изменения: color .

Вы бы использовали CSS здесь. В старые времена это было возможно только для элементов привязки, поэтому вы бы использовали JS здесь для браузера, такого как IE6. Однако это уже не так, поэтому подойдет чистое CSS-решение.

2. Показывать всплывающую подсказку при наведении курсора

Свойства CSS для изменения: display , top , left , right , bottom .

Скорее всего, вы хотите использовать JS здесь. Разметка всплывающей подсказки, вероятно, не является дочерним элементом наведенного элемента, поэтому вы не можете ссылаться на него в своем CSS. Вы можете использовать решение только для CSS, но для этого требуется, чтобы каждый элемент с всплывающей подсказкой включал разметку для этой подсказки. Много избыточных элементов.

JS также необходим здесь для вычисления точного положения toolip относительно элемента и / или курсора.

Обратите внимание, что это пример, в котором вы не можете использовать класс CSS для перечисленных свойств. Внешний вид всплывающей подсказки вы создадите в CSS, но фактическое позиционирование должно быть выполнено в JS.

Я начну с ответа с того, что знаю, но я уверен, что многие другие люди знают намного больше меня.

Одна из причин использования CSS вместо JS заключается в том, что CSS позволяет аппаратное ускорение на мобильных устройствах. Javascript, с другой стороны, этого не делает. Это не так важно для простого background-color изменения, но если вы выполняли какой-либо переход и перемещение элемента, он будет выглядеть намного плавнее и будет более отзывчивым (например, когда JS заблокирован синхронной задачей, анимация все равно будет выполняться) с помощью CSS v jQuery / JS. (Я пытаюсь найти пример этого, я помню, что видел его около года назад).

Еще одна причина использовать CSS вместо JS заключается в том, что он разделяет ваш код на разные части, CSS для стиля и Javascript для логики. Опять же, это личное предпочтение, но именно поэтому многие фреймворки более популярны, чем другие.

С другой стороны, причиной использования JS вместо CSS было бы, если бы вам нужно было отфильтровать список и отобразить стиль для нескольких элементов. В этом случае имело бы смысл сделать это с помощью Javascript. Пуристы утверждают, что вы должны использовать .addClass('myhoverclass') вместо .style(attr:val) , поскольку это позволяет вам использовать преимущества CSS, перечисленные выше.

В конце концов, это вопрос предпочтений. Если вы ищете необработанную скорость или используете интенсивные эффекты, используйте CSS, поскольку он будет лучше работать на мобильных устройствах, а также может быть вынужден использовать аппаратное ускорение на ПК. С другой стороны, если вам проще получить доступ к элементу с помощью Javascript (например, фильтровать список), используйте Javascript.

Вы можете увидеть эту ссылку для получения дополнительной информации.

Ну, на самом деле это довольно интересный вопрос. Я пытаюсь придумать, как вы могли бы даже сделать тест на что-то подобное, тем более, что большую часть времени ни CSS, ни JavaScript не будут выполнять действительно трудоемкие вычисления на веб-странице.

Мое внутреннее чувство говорит о том, что используйте CSS как можно больше, но не превращайте это в жесткое и быстрое правило.

 a:hover {
  background-color: green;
}
  

лучше семантически, чем

 $('a').onmouseover(function() {
  $(this).css('background-color','green');
})
  

НО

 $('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})
  

было бы сложно (хотя и не невозможно) в CSS. Вы могли бы сделать это таким образом.

 $('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}
  

Это действительно был бы немного более неудобный способ сделать то, что можно было бы сделать напрямую в JavaScript, но я думал об этом пару минут, и даже здесь правильным решением вполне может быть CSS, например, если вы устанавливали много атрибутов при выполнениинаведите курсор.

** Пожалуйста, обратите внимание, что ни один из этих кодов не должен работать, они предназначены только для демонстрационных целей.**

См. : когда задача может быть выполнена с помощью Javascript или CSS, лучше ли использовать CSS?