Как изменить css элемента через jQuery

Бывают ситуации, когда нужно изменить стиль html элемента на лету, без перезагрузки страницы. Например, при нажатии на кнопку или только на определенной странице. Сделать это очень просто с помощью jQuery.

Предлагаю использовать не стандартный подход к данной задачи, а именно - мы будем менять css используя атрибут style в jQuery.

Предположим у нас есть элемент:
<style>.myhtml {color: red;}</style>
<div class="myhtml">какое-то содержимое</div>

Давайте изменим на лету его цвет на зеленый и выделим его жирным:

<script type="text/javascript">
$(document).ready(function(){
$(".myhtml").attr('style', 'color: green; font-weight: bold;');
});
</script>

Как вы видите этот код срабатывает только после загрузки страницы и назначает атрибуту style класса .myhtml новые стили. В них можно даже писать !important; для приоритетности.

Если же нам нужно было бы изменить стиль по клику на сам элемент, то код был бы таким:

<script type="text/javascript">
$(document).ready(function(){
$(".myhtml").click(function(){
$(".myhtml").attr('style', 'color: green; font-weight: bold;');
});
});
</script>

Примерно так работают скрипты сайтов, которые предлагают пользователю на лету изменить цветовую схему сайта. А если подумать, то на этом же принципе можно легко сделать версию для слабовидящих (главное прикрутить скрипт куков, которые бы запоминали состояние переменных).

Если же нам нужно изменить css только на определенной странице, то используйте этот код:

<script type="text/javascript">
$(document).ready(function(){
var pathes = window.location.pathname + window.location.search;
if(pathes == '/about/') {
$(".myhtml").attr('style', 'color: green; font-weight: bold;'); }
});
</script>

Переменная pathes определяет текущую относительную ссылку сайта. Если она равна '/about/', то скрипт сработает только на этой странице. Данный метод удобен, если нам нужно делать какие-то исключения на определенных страницах.

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